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。 提供 本 书 PPT 电 子 课件 


清华 大 学 出 版 社 


网 站 开发 非常 之 旅 


HTML+CSS 网 页 设计 详解 


任 旦 衡 ”编著 


清华 大 学 出 版 社 
北 京 


内 容 简 介 


本 书 主要 介绍 页 面前 端 技 术 的 开发 ， 即 常 说 的 HTML+CSS+JavaScript， 内 容 涉及 面 广 ， 从 最 基本 的 HTML 标签 讲 
起 ， 再 到 CSS 样式 和 JavaScript 脚本 语言 的 使 用 ， 几 乎 涉及 网 页 开发 的 所 有 重要 知识 。 本 书 共 分 4 篇 。 第 1 篇 详细 介绍 
什么 是 网 页 、 了 解 HTML 的 作用 、HTML 中 的 一 些 基 本 标签 、 网 页 图 片 的 使 用 、 如 何 设置 网 页 颜色 以 及 网 页 链接 的 设 
置 ; 第 2 篇 详细 介绍 CSS 规则 、 表 格 的 使 用 、 如 何 创建 框架 和 层 以 及 页 面 布局 的 方法 ;第 3 篇 详细 介绍 表单 、 脚 本 语 
言 、JavaScript 入 门 以 及 制作 网 页 所 需要 的 工具 ; 第 4 篇 通过 4 个 案例 综合 介绍 网 页 开发 的 详细 过 程 ， 以 提高 读者 的 实 
战 水 平 。 书 中 提供 了 大 量 实 例 ， 供 读者 实战 演练 。 另 外 ， 专 门 为 本 书 录制 了 大 量 的 配套 教学 视频 ， 并 提供 书 中 的 实例 源 
代码 ， 以 帮助 读者 更 好 地 学 习 本 书 内 容 。 

本 书 适 合 所 有 想 全 面 学 习 网 页 开发 技术 的 人 员 阅 读 。 对 于 经 常 做 网 页 开发 的 人 员 , 更 是 一 本 不 可 多 得 的 案头 必 备 参 
考 书 。 
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互联 网 从 1969 年 诞生 至 今 ， 已 经 走 过 了 四 十 多 个 年 头 。 早 年 的 互联 网 只 适合 给 计算 机 专家 、 工 程 
师 和 科学 家 使 用 ， 直 到 20 世纪 末 ， 互 联网 还 未 被 大 部 分 人 了 解 和 接受 。 但 是 进入 21 世纪 ， 互 联网 的 
发 展 突飞猛进 ， 如 今 已 经 成 为 现代 人 生活 中 的 依赖 品 。 

当初 ， 人 们 只 是 通过 网 站 了 解 各 种 信息 、 新 闻 时 讯 。 随 着 技术 的 发 展 ， 人 们 不 再 满足 于 只 能 浏览 
信息 的 功能 ， 还 要 求 进行 贸易 、 学 习 、 理 财 、 写 博客 、 制 作 相 册 集 等 ， 这 些 都 是 基于 互联 网 来 实现 的 ， 
而 网 页 则 是 互联 网 中 最 基本 的 载体 。 

笔者 结合 自己 多 年 的 网 页 开发 经 验 和 心得 体会 ， 花 费 了 一 年 多 的 时 间 写 作 本 书 ， 希 望 各 位 读者 能 
在 本 书 的 引领 下 跨 入 网 页 开发 大 门 ， 并 成 为 一 名 开发 高 手 。 本 书 结合 大 量 多 媒体 教学 视频 ， 全 面 、 系 
统 、 深 入 地 介绍 了 HTML 网 页 开发 技术 ， 并 以 大 量 实例 贯穿 于 全 书 的 讲解 之 中 ， 最 后 还 详细 介绍 了 主 
流 网 站 开发 设计 案例 。 学 习 完 本 书后 ， 读 者 应 该 具备 独立 进行 网 站 开发 的 能 力 。 


本 书 的 特点 


本 书 深入 浅 出 地 讲解 了 网 页 的 概念 和 制作 网 页 的 方法 ， 以 及 目前 流行 的 各 种 制作 网 页 的 技术 和 常 
用 工具 。 每 章 中 的 例子 不 仅 针对 每 一 项 技术 的 特点 设计 ， 而 且 每 个 例子 都 考虑 了 这 项 技术 的 实用 性 和 
趣味 性 。 
笔者 精心 编写 了 本 书 ， 其 目的 就 在 于 能 够 系统 、 全 面 地 介绍 制作 前 端 页 面 的 技术 。 简 而 言 之 ， 本 
书 可 以 使 读者 做 出 自己 心目 中 网 页 的 样式 ， 帮 助 读者 由 一 个 初级 入 门 者 ， 迅 速 掌握 制作 页 面 的 技巧 ， 
最 终 成 为 一 位 成 熟 、 专 业 的 页 面 设计 人 员 。 
本 书 的 特点 主要 体现 在 以 下 几 个 方面 。 
本 书 的 编排 采用 循序 渐进 的 方式 ， 适 合 初 、 中 级 学 者 逐步 掌握 制作 页 面 的 基本 方法 ， 人 掌握 设计 页 
面 和 管理 页 面 的 精髓 。 
短 短 几 年 间 ， 网 页 制作 技术 突飞猛进 。 本 书 结合 网 页 制作 技术 十 多 年 的 发 展 过 程 ， 先 介绍 早先 的 
技术 ， 然 后 重点 介绍 目前 流行 的 技术 ， 最 后 介绍 未 来 技术 的 发 展 趋势 。 理 解 这 个 发 展 过 程 ， 
会 帮助 读者 更 好 地 掌握 制作 页 面 的 设计 思路 精髓 。 
本 书 在 介绍 各 种 制作 页 面 技 术 时 ， 列 举 了 风趣 易 懂 的 例子 。 这 些 例 子 具备 完整 的 代码 ， 在 介绍 理 
论 知 识 的 同时 ， 更 注重 全 书 的 实用 性 。 这 样 方便 读者 自己 进行 实践 和 演练 ， 而 不 会 在 学 习 理 
论 的 同时 感到 困惑 。 本 书 的 所 有 例子 、 源 代码 和 各 种 免费 工具 都 附 在 配 书 光盘 中 ， 方 便 读 者 
使 用 。 
本 书 除 介绍 页 面 制作 外 ， 还 同时 涵盖 了 大 量 相关 的 重要 的 计算 机 基础 知识 ， 如 图 像 格式 、 颜 色 模 
式 等 。 这 些 知 识 是 重要 的 基础 知识 ， 在 此 基础 上 能 帮助 读者 在 网 页 制作 ， 甚 至 是 图 像 制 作 、 
动画 制作 等 领域 达到 融会 贯通 的 效果 。 


本 书 结合 笔者 多 年 的 制作 经 验 ， 在 每 章 结束 时 都 给 出 了 相应 的 习题 ， 为 读者 学 习 、 巩 固 知识 提供 
帮助 。 


本 书 的 内 容 安排 


本 书 分 为 4 篇 ， 共 19 章 ， 从 制作 页 面 的 基本 概念 讲 起 ， 再 进一步 介绍 一 个 网 页 页 面 的 设计 过 程 所 
经 历 的 各 个 阶段 ， 然 后 结合 目前 成 熟 的 制作 方法 和 理念 ， 讲 解 如 何 进行 页 面 的 设计 制作 ， 最 后 通过 4 
个 综合 案例 让 读者 加 深 印 象 。 


第 1 篇 (第 1 章 ~ 第 6 章 ) : 页 面 制作 入 门 篇 。 


本 篇 主要 内 容 包括 页 面 的 基础 概念 、 页 面 的 运行 原理 、 制 作 页 面 的 基础 知识 、 将 图 像 放 入 网 页 中 、 
设置 网 页 颜色 以 及 网 页 链接 的 使 用 。 读 者 能 通过 本 篇 的 学 习 了 解 什么 是 页 面 ， 如 何在 页 面 中 添加 基本 
的 元 素 ， 以 及 网 页 制作 中 重要 的 属性 概念 ， 如 计算 机 中 的 距离 、 颜 色 和 图 像 等 描述 方式 。 通 过 本 篇 的 
学 习 ， 读 者 可 以 制作 出 简单 的 页 面 。 


第 2 篇 (第 7 章 ~ 第 11 章 ) : 页 面 制作 提高 篇 。 


本 篇 主要 内 容 包 括 CSS 规则 、 表 格 的 使 用 、 创 建 框架 结构 的 页 面 、 层 的 使 用 以 及 页 面 布局 的 
方法 。 通 过 本 篇 的 学 习 ， 读 者 可 以 了 解 如 何 使 用 CSS 样式 来 做 好 页 面 的 布局 设计 ， 令 设计 理念 成 为 
现实 。 


第 3 篇 (第 12 章 ~ 第 15 章 ) : 动感 页 面 篇 。 


本 篇 主要 内 容 包 括 表 单 的 使 用 、 脚 本 语言 简介 、JavaScript 入 门 以 及 制作 页 面 的 工具 。 通 过 本 篇 的 
学 习 ， 读 者 可 以 制作 出 简单 的 动态 页 面 。 


第 4 篇 (第 16 章 ~ 第 19 章 ) : 页 面 实战 篇 。 


本 篇 主要 内 容 包 括 制作 主流 网 站 界面 实例 开发 、 设 计 复杂 页 面 实例 开发 、 制 作 英 文 网 站 实例 开发 
以 及 使 用 Dreamweaver 制作 中 文 网 站 实例 开发 。 通 过 本 篇 的 学 习 ， 读 者 可 以 全 面 应 用 前 面 章节 所 学 的 
开发 技术 进行 网 站 的 开发 ， 达 到 独立 开发 网 站 的 水 平 。 


本 书 的 读者 对 象 


希望 进入 网 站 制作 领域 的 新 手 。 

希望 系统 地 学 习 网 页 制作 的 页 面 制作 人 员 。 

具备 一 定 的 页 面 基础 理论 但 缺乏 实践 操作 的 人 员 。 
HTML 语言 爱好 者 。 

网 站 管理 人 员 。 

页 面 样式 设计 人 员 。 

大 中 专 院 校 的 学 生 。 
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听 说 网 页 是 一 种 神奇 的 “ 东 东 ”， 它 不 仅 可 以 呈现 丰富 的 文字 、 图 片 ， 
还 可 以 从 一 个 网 页 跳 转 到 其 他 网 页 。 本 篇 就 将 带领 读者 学 习 这 些 知 识 。 通 过 
本 篇 的 学 习 ， 读 者 可 以 制作 出 各 类 基本 的 网 页 。 

第 1 章 了 解 网 页 

第 2 章 通过 学 习 他 人 的 网 页 了 解 HTML 能 做 什么 

第 3 章 动手 在 网 页 中 写 些 什么 

第 4 章 将 图 像 放 入 页 面 中 


第 5 章 让 网 页 变 得 更 绚丽 4 
第 6 章 网 页 链接 ~ 6) 


第 1 章 了 解 网 页 


15 年 前 ，“ 网 上 冲浪 ”还 是 一 个 新 兴 名 词 ， 但 随 着 互联 网 的 飞速 发 展 ， 如 今 使 用 网 络 已 经 成 为 了 
生活 中 的 一 部 分 。Web 1.0 时 代 ， 人 们 只 是 在 网 页 上 浏览 信息 ， 而 在 现在 所 处 的 Web 2.0 时 代 ， 人 们 可 
以 在 网 页 上 和 朋友 讨论 话题 、 听 音乐 、 看 电影 、 进 行 电子 商务 的 操作 。《 纽 约 时 报 》 专 栏 作家 托马斯 。 弗 
里 曼 在 他 的 《世界 是 平 的 》 一 书 中 说 到 : “2000 年 世界 进入 了 一 个 新 纪元 : 全 球 化 3.0。 世 界 从 小 缩 成 
微小 ， 竞 赛场 地 铲 平 了 。” 

从 本 章 开始 ， 将 介绍 一 些 与 互联 网 相关 的 常用 技术 ， 以 及 制作 网 页 时 通常 需要 涉及 的 领域 、 需 要 
考虑 的 问题 等 。 本 章 的 知识 点 很 多 ， 但 并 不 难 理解 ， 读 者 千 万 不 要 被 那些 可 怕 的 名 词 或 者 代码 给 吓 住 。 
虽然 HTML (Hypertext Marked Language， 超 文本 标记 语言 ) 标签 很 多 ， 但 是 在 找到 规律 后 也 就 容易 理 
解 了 。 事 实 上 ， 学 习 HTML 不 会 太 难 。 本 章 的 主要 知识 点 如 下 。 

网 页 的 概念 和 分 类 : 了 解 网 页 的 概念 ， 区 别 静 态 网 页 和 动态 网 页 的 不 同 。 

设计 网 页 的 原则 和 工具 : 了 解 开发 网 页 的 常用 工具 。 

网 页 浏览 器 的 工作 原理 : 知道 网 页 浏览 器 的 工作 原理 ， 并 了 解 三 种 常用 的 浏览 器 。 

HIML、XML (The Extensible Markup Language， 可 扩展 标识 语言 ) 和 XHTML (The Extensible 

Hypertext Markup Language， 可 扩展 超 文 本 标识 语言 ): 是 构成 网 页 的 基础 语言 ， 读 者 需要 区 
分 三 者 概念 上 的 不 同 之 处 。 
HTML 应 用 : 通过 本 章 最 后 的 实例 ， 演 示 一 个 简单 的 HTML 页 面 的 开发 步骤 。 


1.1 什么 是 网 页 


21 世纪 是 信息 化 的 时 代 ， 用 户 可 以 在 互联 网 上 通过 网 页 浏览 信息 ， 如 新 闻 、 图 片 等 ， 也 可 以 通过 
互联 网 发 布 信息 ， 如 招聘 信息 、 各 种 广告 等 ; 或 者 是 追赶 潮流 ， 加 入 现今 十 分 流行 的 博客 一 族 ， 这 些 
都 离 不 开 互联 网 的 “窗户 ”一 一 网 页 。 下 面 将 介绍 网 页 的 相关 知识 。 


1.1.1 网 页 的 概述 


鳃 dl 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 网 页 的 概述 .wmv 

网 页 其 实 是 存储 在 计算 机 上 的 一 个 文件 ， 通 过 互联 网 将 两 个 不 同 的 地 址 相连 ， 把 人 们 的 信息 传达 
到 网 络 世界 的 各 个 角落 ， 可 以 不 受 地 域 限制 地 互相 交流 沟通 。 

所 谓 互 联网 ， 是 一 种 概念 ， 一 个 虚拟 的 东西 。 用 户 可 以 通过 浏览 器 浏览 新 浪 、 百 度 等 页 面 ， 但 是 
不 会 有 人 说 “浏览 互联 网 ”。 互 联网 是 指 把 所 有 网 页 链接 在 一 起 的 巨大 信息 交流 形式 ， 它 基于 很 多 协 
议 来 体现 出 它 的 表现 形式 。1989 年 ， 欧 洲 粒子 物理 实验 室 的 科学 家 们 提出 了 一 个 分 类 互联 网 信息 的 协 
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议 。 这 个 协议 极 大 地 推动 了 互联 网 的 发 展 和 普及 ， 后 来 它 有 了 一 个 十 分 响亮 的 名 字 一 一 WWW (World 
Wide Web) ， 中 文 又 称 万 维 网 。 可 以 认为 ， 从 20 世纪 90 年 代 开 始 ， 互 联网 进入 了 Web 1.0 时 代 。 

Web 1.0 时 代 ， 大 部 分 网 页 只 有 文字 、 图 像 信息 可 以 浏览 ， 最 典型 的 互联 网 标志 就 是 门户 网 站 ， 如 
新 浪 、 搜 狐 。 从 2001 年 开始 ， 人 们 认为 互联 网 开始 进入 Web 2.0 时 代 ， 这 时 网 页 可 以 包含 动画 、 音 频 
和 视频 ， 也 可 以 在 网 页 中 进行 交流 、 上 传 文件 ， 使 用 完全 交互 式 的 程序 ， 开 始 更 注重 个 人 化 的 网 络 服 
务 ， 任 何 使 用 网 络 的 用 户 ， 都 可 以 参与 到 网 页 的 制作 中 。 

笼统 地 说 ， 网 页 主要 由 3 部 分 组 成 : 结构 、 表 现 和 行为 。 对 应 的 标准 也 分 为 3 类 ， 其 中 大 部 分 都 
是 由 W3C (World Wide Web 协会 ) 所 制定 ， 其 中 包括 HTML 和 CSS (Cascading Style Sheet， 层 登 样 
式 表 ) 。 对 于 初学 者 来 说 ， 了 解 网 页 的 制作 ， 一 定 要 分 清楚 HTML 和 CSS 的 不 同 作用 。 
说 明 : HTML 标 准 基于 语义 学 ， 通 过 标签 来 应 用 语义 的 过 程 。 使 用 起 来 好 像 是 打手 语 ， 做 一 个 手势 ， 

去 告诉 对 方 代 表 了 什么 意思 。 不 同 的 是 ， 这 里 的 手势 换 成 了 标签 。 

例如 ， 使 用 <table>， 这 是 一 个 表格 标签 ， 意 思 是 “将 在 这 里 放 入 一 个 表格 ”。 那 么 这 个 表格 该 如 
何 表 现在 浏览 者 的 面前 呢 ? 例如 ， 它 的 颜色 、 边 框 粗 细 等 。CSS 的 出 现 为 设计 者 解决 了 这 些 问题 ， 如 
图 1.1 和 图 1.2 所 示 为 不 同样 式 的 表格 。 
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图 1.1 粗 边框 的 表格 图 1.2 细 边 框 的 表格 
图 1.1 和 图 1.2 中 都 有 一 个 3X3 表格 的 页 面 。 这 样 的 描述 ， 如 同 HTML 语言 所 表达 的 含义 ， 体 现 
出 页 面 上 的 内 容 ,而 在 浏览 器 中 的 最 后 显示 效果 是 完全 不 同 的 两 个 表格 。 图 1.1 中 的 表格 边框 较 粗 ,为 
黑色 ; 图 1.2 中 的 表格 边框 较 细 ， 为 绿色 (这 是 因为 它们 使 用 了 不 同 的 CSS 样式 表 ) 。 所 以 ，HTML 
表现 了 页 面 的 结构 ， 而 CSS 修饰 了 页 面 中 的 内 容 。 如 果 把 制作 网 页 比 作 设 计 一 间 屋 子 ， 那么 HTML 语 
言 的 作用 是 用 来 明确 这 个 屋子 内 要 放 入 哪些 家 具 ， 或 者 是 床 、 书 柜 、 椅 子 等 ， 而 CSS 的 作用 是 改变 这 
些 家 具 的 样式 。 


1.1.2 静态 网 页 


贸 m 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 1 章 \ 静 态 网 页 .wmv 
在 网 站 设计 中 ， 纯 粹 的 HTML 格式 网 页 通常 被 称 为 静态 网 页 ， 早 期 的 网 站 一 般 都 是 由 静态 网 页 组 
成 的 。 静态 网 页 的 特点 是 这 个 网 页 不 论 何 时 何 地 浏览 ， 都 将 显示 相同 的 形式 和 内 容 ， 且 仅 能 供 浏 览 ， 
无 法 实现 互动 。 也 就 是 说 ， 无 法 提供 信息 给 网 站 ， 让 网 站 响应 用 户 的 需求 。 
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SS 网 页 设计 详解 


【实例 1-1】 本 实例 是 一 个 静态 页 面 的 代码 展示 。 


其 代码 如 下 所 示 。 


<html> 
<| 
<title> 静 态 页 面 </title> 
</head> 


<body> 
<h1> 这 是 一 个 静态 页 面 </h1> 
<h3> 您 只 能 浏览 ， 不 能 进行 交互 。</h3> 
</body> 


com、oDom 上 whN 一 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 1.3 所 示 ， 此 页 面 只 能 浏览 ， 而 不 能 进行 交互 。 
/个 下 二 -ee 
【人 5)J 同 下 mawavmermuc pc] 号 6sr 


| 文件 丰 ” 舌 入 [E) 宣 看 (VI 皮 宏 夫 ( 工具 条 则 ” 


这 是 一 个 静态 页 面 


您 只 能 浏览 ， 不 能 进行 交互 - 
Row 
1.3 ”静态 页 面 示例 


【深入 学 习 】 静 态 页 面 使 用 HIML 编写 ， 后 级 名 一 般 为 htm、.html。 静 态 网 页 只 能 单纯 地 在 网 页 
中 展示 文字 与 图 片 ， 虽 然 功能 简单 ， 但 是 它 是 所 有 网 页 的 基础 要 素 ， 其 重要 性 不 言 而 喻 。 

在 静态 网 页 中 , 整个 网 页 的 主要 结构 与 网 页 的 显示 控制 都 必须 利用 HTML 实现 。 在 HTML 格式 的 
网 页 上 ， 可 以 出 现 各 种 动态 效果 ， 如 GIF 格式 的 动画 、Flash、 滚 动 字母 等 。 这 些 动态 效果 只 是 视觉 上 
的 ， 与 动态 网 页 是 不 同 的 概念 。 


注意 : 本 书 中 大 部 分 实例 都 是 静态 页 面 。 
1.1.3 动态 网 页 


区 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 动 态 网 页 .wmv 

动态 网 页 与 静态 网 页 是 相对 应 的 ， 动 态 网 页 指 网 页 的 内 容 可 以 根据 某 种 条 件 的 改变 而 自动 改变 。 
如 腾讯 公司 的 产品 Qzone 空间 里 ， 常 常会 有 一 些 使 用 者 在 其 中 嵌入 一 个 小 小 的 计数 器 功能 ， 当 有 用 户 
单 击 设计 者 的 网 页 时 ， 计 数 器 的 值 会 自动 增加 ， 这 个 计数 器 就 是 动态 的 。 再 如 ， 各 论坛 、 社 区 网 中 的 
用 户 登 录 页 面 ， 当 用 户 输入 正确 的 用 户 名 和 密码 后 登录 成 功 ， 如 果 输 入 的 用 户 名 或 者 密码 错误 ， 页 面 
会 提示 错误 信息 ， 这 也 是 典型 的 动态 页 面 。 

与 静态 网 页 的 后 级 不 同 ， 动 态 网 页 是 以 .asp、jsp 和 .php 等 为 后 级 ， 并 且 在 动态 网 页 的 网 址 中 有 一 
个 标志 性 的 符号 “?”。 例如， 一 个 典型 的 动态 网 页 的 URL (Uniform Resource Locator， 统 一 资源 定位 
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第 1 章 了 解 册 II 


器 ) 形式 为 http://www.sina.cn/ip/index.asp?id=] 。 

那么 ， 动 态 网 页 与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 动态 效果 为 什么 不 是 一 个 概念 呢 ? 动 
态 网 页 可 以 是 纯 文字 内 容 的 ， 也 可 以 包含 各 种 动画 内 容 。 这 些 只 是 网 页 具体 内 容 的 表现 形式 ， 并 不 是 
用 动态 技术 生成 的 页 面 ， 它 不 能 根据 用 户 的 要 求 来 更 新 页 面 。 而 一 个 网 页 ， 无 论 是 否 具有 动态 效果 ， 
只 有 采用 动态 网 站 技术 生成 ， 才 可 以 称 为 动态 网 页 。 


注意 : 分 清楚 静态 网 页 和 动态 网 页 的 区 别 很 重要 ， 概 念 清晰 才能 进一步 理解 哪些 是 HTML 语 言 可 以 做 
到 的 ， 哪 些 是 不 允许 的 ， 避 免 在 学 习 的 过 程 中 钻 牛角 类 。 


在 了 解 了 动态 网 页 的 概念 之 后 ， 下 面 通过 一 个 动态 网 页 的 例子 来 说 明 在 动态 页 面 中 是 如 何 实现 与 
用 户 的 互动 的 。 如 图 1.4 所 示 是 一 个 动态 页 面 的 第 一 个 页 面 。 当 填 入 一 个 已 注册 用 户 ， 如 用 户 名 为 
appleing， 密 码 为 1234567 时 ， 系 统 检查 到 用 户 名 和 密码 是 正确 的 ， 即 跳 转 到 用 户 页 面 ， 如 图 1.5 所 示 。 


注意 : 这 种 功能 是 静态 页 面 无 法 做 到 的 。 或 者 说 ， 仅 仅 依靠 HTML 代 码 是 无 法 实现 这 种 效果 的 。 

图 1.5 所 示 的 页 面 显示 了 该 用 户 可 以 使 用 的 功能 , 包括 用 户 邮件 服务 和 用 户 短 消息 服务 。 这 种 针对 
使 用 者 的 设计 是 动态 页 面 典型 的 功能 标志 。 如 果 用 户 输入 错误 的 用 户 名 和 密码 ， 例 如 ， 输 入 用 户 名 为 
bupt， 密 码 为 bupt， 则 系统 会 检查 到 用 户 名 和 密码 是 错误 的 ， 会 弹出 错误 信息 ， 显 示 登 录 失 败 ， 如 
图 1.6 所 示 。 
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图 1.4 userLoginjsp 页 面 图 1.5 用 户 页 面 图 1.6 登录 报错 页 面 

以 上 是 一 个 典型 的 动态 页 面 的 例子 ， 用 户 输入 不 同 的 信息 ， 则 页 面 显示 不 同 的 结果 。 动 态 页 面 比 
静态 页 面 更 智能 、 更 人 性 化 ， 自 然 也 是 互联 网 发 展 的 趋势 。 理 解 静态 页 面 是 学 习 动 态 页 面 的 必 备 基础 
知识 。 


1.1.4 开发 动态 页 面 和 静态 页 面 的 联系 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 1 章 \ 开 发 动态 页 面 和 静 态 页 面 的 联系 .wmv 
早期 的 动态 网 页 主要 采用 CGI (Common Gateway Interface) 技术 。 它 是 HTTP 服务 器 与 用 户 或 其 
他 机 器 上 的 程序 进行 “交谈 ”的 一 种 工具 ， 其 程序 需 运 行 在 网 络 服务 器 上 ， 可 以 使 用 多 种 不 同 的 程序 
语言 (如 Visual Basic、Delphi 或 C/C++ 等 ) 编写 适合 的 CGI 程序 。 
用 户 在 页 面 上 留言 ， 输 入 一 段 信息 ， 接 着 单 击 “确定 ”按钮 ， 这 些 都 是 在 客户 端 进行 的 操作 ， 接 
下 来 浏览 器 会 将 用 户 的 信息 传递 到 CGI 程序， 于 是 CGI 程序 在 服务 器 上 按照 预定 的 方法 进行 处 理 。 虽 
然 CGI 技术 已 经 应 用 很 长 时 间 而 且 功能 比较 强大 ， 但 由 于 其 有 编程 困难 、 效 率 低下 和 修改 复杂 等 缺点 
而 逐渐 被 新 技术 取代 。 目 前 常用 的 新 技术 有 3 种 ， 分 别 是 PHP 脚本 语言 、ASP 脚本 语言 和 JSP 脚本 语 
言 ， 这 3 种 技术 在 制作 网 页 上 各 有 特色 ， 但 都 在 发 展 中 ， 在 市 场 上 都 占有 一 席 之 地 。 
© 


1. PHP 脚本 语言 


PHP 即 Hypertext Preprocessor 〈 超 文本 预 处 理 器 ) ， 是 目前 在 Intemet 上 应 用 较 广泛 的 脚本 语言 ， 
其 语法 借鉴 了 C、Java 和 Perl 等 语言 。 它 对 编程 能 力 的 要 求 不 高 , 只 需 少量 的 编程 知识 就 可 以 使 用 PHP 
建立 一 个 交互 的 Web 站 点 。 

PHP 与 HTML 语言 具有 非常 好 的 兼容 性 , 因此 它 与 HTML 可 以 结合 使 用 , 从 而 更 好 地 实现 页 面 控 
制 ， 即 直接 在 脚本 代码 中 加 入 HTML 标签 ， 或 者 在 HIML 标签 中 加 入 脚本 代码 。 PHP 提供 了 标准 的 数 
据 库 接口 ， 使 得 连接 数据 库 比 较 方 便 ， 另 外 还 具有 扩展 性 强 、 可 以 进行 面向 对 象 编 程 等 特点 。 


2. ASP 脚本 语言 


ASP 即 Active Server Pages， 是 微软 开发 的 一 种 语言 ， 它 本 身 没 有 专门 的 编程 语言 ， 而 是 允许 用 户 
使 用 许多 已 有 的 脚本 语言 编写 ASP 的 应 用 程序 。 其 工作 方式 是 在 Web 服务 器 端 运行 , 然后 将 运行 结果 
以 HTML 格式 传送 至 客户 端的 浏览 器 。 正 因为 如 此 ，ASP 要 比 一 般 的 脚本 语言 安全 得 多 。 

ASP 可 以 包含 HTML 标签 ， 也 可 以 直接 存 取 数 据 库 及 使 用 可 扩充 的 ActiveX 控件 ， 因 此 ，ASP 的 
程序 编写 比 HTML 更 方便 且 更 有 灵活 性 , 但 ASP 技术 基本 上 局 限于 微软 的 操作 系统 平台 之 上 , 主要 工 
作 环 境 是 微软 的 IS 应 用 程序 结构 ， 而 且 ActiveX 对 象 具有 平台 特性 ， 所 以 ASP 技术 跨 平台 性 不 是 很 
好 ， 要 实现 在 跨 平 台 Web 服务 器 上 工作 不 是 很 容易 。 


3. JSP 脚本 语言 


JSP 即 Java Server Pages， 是 由 Sun Microsystem 推出 的 ， 以 Java Servlet 和 整个 Java 体系 的 Web 
开发 技术 为 基础 。JSP 和 ASP 在 技术 方面 有 许多 相似 之 处 ， 不 过 ASP 一 般 只 应 用 于 微软 的 平台 上 ， 而 
JSP 则 可 以 在 大 多 数 服务 器 上 运行 ， 而 且 采 用 JSP 技术 开发 的 应 用 程序 比 采用 ASP 开发 的 应 用 程序 更 
具有 可 维护 性 和 可 管理 性 ， 所 以 被 业界 认为 是 未 来 最 有 发 展 前 途 的 动态 网 站 技术 。 

这 3 种 技术 目前 是 制作 动态 页 面 的 主流 技术 ， 而 且 在 未 来 一 段 时 间 内 ，PHP、ASP 和 JSP 也 会 在 
竞争 中 共存 。 对 微软 服务 器 较 熟 悉 的 程序 员 采 用 ASP 技术 会 更 得 心 应 手 。 对 于 Linux 的 爱好 者 来 说 ， 
采用 PHP 技术 是 比较 合适 的 选择 。 对 可 维护 性 和 可 管理 性 要 求 较 高 的 设计 者 ， 适 合 使 用 JSP 技术 ， 尤 
其 是 在 构建 大 型 网 站 的 应 用 时 。 


注意 : 动态 页 面 的 制作 相对 HTML 页 面 复杂 得 多 ， 了 解 动态 页 面 的 制作 方式 和 HTML 页面 的 关联 ,能 够 
帮助 初学 者 学 习 、 理 解 静态 页 面 。 


事实 上 , 动态 页 面 的 设计 是 离 不 开 HTML 的 ,每 一 个 动态 网 页 开发 者 都 必须 掌握 HTML 语言 。 在 
实际 应 用 的 网 页 中 ， 动 态 网 站 中 包含 大 量 的 HTML 代码 ， 合 理 结合 静态 页 面 和 动态 页 面 可 以 使 网 页 设 
计 更 加 灵活 。 

此 外 ， 设 计 者 应 明白 ， 动 态 网 站 不 一 定 比 静 态 网 页 更 好 ， 动 态 网 站 的 交互 性 可 能 带 来 安全 隐患 ， 
而 且 动态 网 站 的 信息 均 是 从 数据 库 中 读 取 ， 当 负荷 过 大 时 可 能 造成 网 站 崩溃 。 有 的 动态 网 站 对 于 搜索 
引擎 不 是 很 友好 ， 在 一 些 搜索 页 面 中 不 容易 被 查找 ， 这 样 会 影响 网 站 的 推广 。 

因此 , 无 论 是 从 HTML 在 网 页 设计 中 的 基础 地 位 ， 还 是 从 其 优点 来 说 ， 熟 练 掌握 HTML 对 于 网 页 
设计 很 重要 。 在 这 个 基础 上 再 向 动态 页 面 设计 的 道路 前 进 时 ， 会 更 容易 地 掌握 动态 页 面 的 使 用 技术 。 
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1.2 开发 网 页 的 工具 


如 果 说 网 页 设计 者 是 一 个 画家 ， 那 么 开发 程序 的 工具 就 相当 于 画家 手中 的 画笔 和 颜料 。 这 些 工具 
能 为 设计 者 编写 代码 、 调 试 代码 、 运 行 代码 时 提供 一 个 便利 的 环境 。 在 开发 网 页 时 也 有 专门 的 开发 工 
具 ， 如 记事 本 、Dreamweaver 等 工具 可 以 用 来 开发 PHP、ASP 和 JSP 中 的 任何 一 种 程序 。 


1.2.1 HTML 页 面 的 开发 工具 


名 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \HTML 页 面 的 开发 工具 .wmv 
HTML 语言 作为 一 种 语义 派生 出 来 的 语言 ,最 常见 的 有 3 种 开发 工具 ,分 别 是 记事 本 、Dreamweaver 
和 FrontPage。 


1. 记事 本 


记事 本 是 Windows 系统 自 带 的 简单 的 文本 编辑 软件 ， 但 由 于 大 部 分 代码 都 是 纯 文本 的 ， 所 以 记事 
本 可 以 编写 任何 网 页 。 不 过 对 于 制作 稍 大 型 的 网 页 ， 需 要 编辑 大 量 代码 时 ， 使 用 记事 本 就 不 适合 了 ， 
但 对 于 初学 者 来 说 ， 记 事 本 是 较 好 的 练习 工具 。 


2. Dreamweaver 


Dreamweaver 是 Macromedia 公司 开发 的 集 网 页 制作 和 网 站 管理 于 一 身 的 网 页 编辑 器 。 它 是 一 款 专 
业 网 页 设计 师 的 视觉 化 网 页 开发 工具 ， 利 用 它 可 以 制作 出 跨越 平台 和 浏览 器 限制 的 充满 动感 的 网 页 。 

Dreamweaver 最 大 的 特点 是 所 见 即 所 得 。 可 以 使 用 它 的 网 站 地 图 快速 制作 网 站 和 雏形， 设计 、 更 新 
和 重组 网 页 。 此 外 ，Dreamweaver 可 以 自动 生成 源 代 码 ， 大 大 提高 了 网 页 开发 人 员 的 工作 效率 。 但 是 
Dreamweaver 也 有 其 自身 的 缺点 ， 如 在 一 些 复 杂 的 网 页 中 ， 难 以 精确 地 达到 与 浏览 器 完全 一 致 的 显示 
效果 。 同 时 其 产生 的 代码 效率 比较 低 。 

Dreamweaver 是 一 款 可 视 化 编辑 工具 ， 如 图 1.7 所 示 为 Dreamweaver 工作 状态 的 操作 界面 。 
Dreamweaver 不 仅 支持 静态 页 面 的 编写 ， 还 支持 PHP、ASP 和 JSP 等 动态 网 页 的 编写 与 调试 。 对 于 网 
页 设计 初学 者 来 说 ，Dreamweaver 是 一 款 比 较 好 的 入 门 软件 ， 即 使 对 HTML 不 太 熟 悉 ， 也 能 做 出 漂亮 
的 网 页 来 。 

Dreamweaver 的 工作 界面 有 许多 窗口 ， 这 些 工 具 窗口 可 以 按照 用 户 自 定 义 的 样式 自由 设 定 。 从 
图 1.7 中 可 以 看 到 ， 最 引 人 注 意 的 两 个 工作 区 域 分 别 是 代码 区 和 预览 区 。 


说 明 : 关于 Dreamweaver 的 进一步 介绍 可 以 参考 第 15 章 的 内 容 。 


3. FrontPage 


FrontPage 是 微软 公司 发 布 的 一 款 入 门 级 网 页 制作 工具 ， 是 Office 组 件 的 一 部 分 ， 但 其 直观 性 和 高 
效 性 无 法 比拟 Dreamweaver， 而且 在 功能 拓展 方面 也 少 于 Dreamweaver， 因 此 2006 年 停止 了 FrontPage 
发 售 , 但 并 不 能 因此 认为 这 是 一 款 失败 的 制作 软件 ， 因 为 它 依然 受到 众多 用 户 的 欢迎 。 如 图 1.8 所 示 为 


FrontPage 的 操作 界面 。 
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图 1.8 FrontPage 的 操作 界面 


由 于 Dreamweaver 的 适用 性 目前 已 经 超过 了 FrontPage， 因 此 在 大 多 数 情况 下 ,设计 人 员 的 第 一 选 
择 是 Dreamweaver。 


注意 : 在 写本 书 时 ，Dreamweaver 最 新 版 本 是 Dreamweaver CS6, 本 书 所 有 实例 都 是 在 Dreamweaver CS6 
下 完成 的 。 


1.2.2 ”动态 页 面 的 开发 工具 
鳄 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 1 章 \ 动 态 页 面 的 开发 工具 .wmv 


动态 页 面 的 开发 工具 根据 开发 语言 不 同 而 不 同 。 本 节 主 要 介绍 常见 的 3 种 开发 语言 ， 即 PHP、JSP 
和 ASP 的 开发 工具 。 
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1. PHP 开发 工具 


PHP 作为 一 种 开放 型 的 语言 ， 并 没有 标准 的 开发 工具 ,可 以 用 很 多 工具 进行 开发 ， 如 记事 本 、ZDE 
等 ， 只 要 语法 正确 即 可 。 比 较 好 的 开发 工具 是 ZDE 和 PHPED。 

ZDE (Zend Development Environment) 是 ZEND 公司 推出 的 一 款 集成 开发 平台 。ZDE 是 用 Java 
语言 编写 的 ， 同 样 具有 多 平台 性 。 

PHPED 是 由 NUSPHERE 公司 推出 的 ， 它 提供 的 功能 最 全 ， 同 样 具有 语法 加 亮 、 函 数 补 全 和 工程 
管理 等 功能 。 除 此 之 外 ， 还 有 自动 代码 补 全 功能 、 可 视 化 的 数据 库 管理 功能 、 常 见 HTML 标签 集 和 支 
持 插件 等 功能 ， 同 时 还 内 置 DAV、CVS、FTP、WEBSERVER、DEBUGGER 和 JS 代码 列表 。 


说 明 : 对 于 HTML 页 面 的 开发 者 来 说 ， 不 需要 了 解 这 两 种 开发 软件 ， 它 们 主要 用 于 开发 PHP 页 面 。 
2. ASP 开发 工具 


Visual InterDev 和 FrontPage 是 较 好 的 ASP 开发 工具 。Visual InterDev 是 Microsoft 公司 开发 的 ASP 
开发 工具 ， 是 一 款 可 视 化 工具 ， 可 以 对 ASP 代码 进行 颜色 识别 、 自 动 代码 提示 。Visual InterDev 是 为 
程序 员 设计 的 网 页 开发 工具 ， 而 FrontPage 是 针对 非 程序 员 的 编辑 工具 。FrontPage 是 Microsoft Office 
中 的 一 部 分 。Visual InterDev 则 是 Microsoft Visual Tools 中 的 一 部 分 ， 其 外 观 和 工作 模式 均 与 其 他 
Microsoft 可 视 开 发 工具 类 似 ， 如 Microsoft Visual C++。 


3. JSP 开发 工具 


MyEclipse+Stmuts 是 比较 流行 的 JSP 开发 工具 。Struts 最 早 是 作为 Apache Jakarta 项 目的 组 成 部 分 ， 
项 目的 创立 者 希望 通过 对 该 项 目的 研究 ， 改 进 和 提高 Java Server Pages、Servlet、 标 签 库 以 及 面向 对 象 
的 技术 水 准 。 

Struts 这 个 名 字 来 源 于 在 建筑 和 旧式 飞机 中 使 用 的 支持 金属 架 ， 这 个 框架 之 所 以 命名 为 Struts， 是 
为 了 提醒 人 们 记 住 那些 支撑 房屋 、 建 筑 、 桥 梁 ， 甚 至 在 踩 高 跷 时 的 基础 支撑 。 这 也 是 一 个 解释 Struts 
在 开发 Web 应 用 程序 中 所 扮演 角色 的 精彩 描述 。 当 建立 一 个 物理 建筑 时 ， 建 筑 工程 师 使 用 支柱 为 建筑 
的 每 一 层 提供 支持 。 使 用 JSP 开发 工具 开发 简单 .维护 方便 , 而且 便于 安装 插件 ,可 以 与 Spring、Hibernate 
等 结合 使 用 ， 满 足 开发 者 的 需要 。 


说 明 : 这 些 都 是 动态 页 面 的 开发 环境 ， 并 不 属于 静态 页 面 的 范畴 ， 故 这 里 只 作 一 个 简要 的 介绍 。 


1.3 使 用 网 页 浏览 器 


网 页 浏览 器 是 显示 网 页 服务 器 或 档案 系统 内 的 文件 ， 并 让 用 户 与 这 些 文件 互动 的 一 种 软件 ， 用 来 
显示 在 万 维 网 或 局 域 网 等 内 的 文字 、 影 像 及 其 他 信息 。 浏 览 器 就 是 设计 者 的 画廊 ， 设 计 者 把 网 页 放 在 
这 里 展示 给 用 户 。 


1.3.1 网 页 浏览 器 的 工作 原理 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 1 章 \ 网 页 浏览 器 的 工作 原理 .wmv 
Windows 系统 中 自 带 了 正 浏览 器 ， 普 通用 户 在 使 用 它 浏览 网 页 时 ,很 多 时 候 都 忽视 了 自己 所 使 用 
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的 浏览 器 。 对 于 一 个 页 面 设计 者 来 说 ， 了 解 浏览 器 的 原理 可 以 找到 适合 的 途径 把 网 页 展示 给 用 户 。 

那么 用 户 是 如 何 使 用 浏览 器 浏览 网 页 的 呢 ? WWW 采用 B/S (BrowserServer) 结构 ， 即 浏览 器 和 
服务 器 结构 , 这 是 对 C/S 结构 的 一 种 变化 或 者 改进 的 结构 。 在 这 种 结构 下 , 用 户 的 工作 界面 通过 WWW 
浏览 器 来 实现 ， 主 要 事务 逻辑 在 服务 器 端 (Server) 实现 ， 少 部 分 事务 逻辑 在 前 端 (Browser) 实现 。 
采用 B/S 结构 的 好 处 是 大 大 简化 了 客户 端的 计算 机 载荷 ， 减 轻 了 系统 维护 与 升级 的 成 本 和 工作 量 ， 降 
低 了 用 户 的 总 体 成 本 。 因 此 ， 用 户 只 需要 安装 浏览 器 即 可 浏览 页 面 ， 不 需要 知道 服务 器 端 使 用 的 是 什 
么 操作 系统 或 者 服务 器 端 是 怎么 处 理 浏览 器 发 出 的 请 求 的， 可 以 方便 地 查看 自己 想 看 到 的 内 容 。 

浏览 器 的 工作 原理 可 以 分 以 下 几 步 来 理解 。 

(1) 浏览 器 通过 HTML 表单 或 超 链接 请 求 指向 一 个 应 用 程序 的 URL。 

(2) URL 将 用 户 请 求 发 送 到 服务 器 。 

(3) 服务 器 执行 已 接受 创建 的 指定 应 用 程序 。 

(4) 应 用 程序 通常 基于 用 户 输入 的 内 容 来 执行 所 需要 的 操作 。 

(5) 应 用 程序 把 结果 格式 化 为 网 络 服务 器 和 浏览 器 能 够 理解 的 文档 ， 即 HTML 网 页 。 

(6) 网 络 服 务 器 最 后 将 结果 返回 到 浏览 器 中 。 

如 图 1.9 所 示 为 浏览 器 的 工作 原理 流程 图 。 


浏 攻 器 通 过 表单 或 起 链接 请 URL 格 用 户 请 求 发 送 到 服务 器 
一 
[| 


应 用 程序 结果 格式 化 为 网 | 
络 服务 器 和 浏览 器 能 理解 的 bi 
文档 ， 把 结 果 返 回 到 浏览 器 所 需要 的 操作 | 各 和 品 涩 行 i 计 者 创建 的 定 应 用 程序 


图 1.9 浏览 器 的 工作 原理 流程 图 


图 1.9 是 一 个 从 用 户 在 浏览 器 输入 网 址 到 浏览 器 显示 页 面 的 一 个 工作 过 程 。WWW 的 基础 是 HTTP 
协议 ，Web 浏览 器 就 是 通过 URL 来 获取 并 显示 Web 网 页 的 一 种 软件 工具 。URL 用 于 指定 要 取得 的 
Internet 上 资源 的 位 置 与 方式 。 

因此 ， 并 不 是 所 有 浏览 器 都 支持 HTML 语言 标签 。 在 这 种 情况 下 ， 需 要 在 HTML 中 添加 有 声明 作 
用 的 代码 ， 相 关 的 知识 点 在 本 书后 面 的 章节 中 会 详细 介绍 。 


1.3.2 ”常用 的 两 种 浏览 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 常 用 的 两 种 浏览 器 .wmv 

目前 互联 网 上 最 常用 的 两 种 浏览 器 分 别 是 Intemet Explorer 和 Mozilla Firefox， 它 们 基于 不 同 的 内 
核 ， 各 有 特色 ， 难 分 伯仲 。 

Internet Explorer 简称 正 或 MSIE， 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 自 从 2004 年 上 市 以 来 , 虽 
然 丢 失 了 一 部 分 市 场 占有 率 ,但 依然 是 目前 使 用 最 广泛 的 网 页 浏览 器 。 现 在 正 浏览 器 被 捆绑 作为 所 有 
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新 版 本 的 Windows 操作 系统 中 的 默认 浏览 器 ， 如 图 1.10 所 示 。 
Mozilla Firefox 是 由 Mozilla 公司 开发 的 一 个 自由 的 、 开 放 源码 的 浏览 器 ,是 一 款 可 以 同 正 系列 浏 
览 器 一 争 高 低 的 浏览 器 。 这 款 浏 览 器 有 效 地 支持 W3C 各 项 国际 标准 的 开源 浏览 器 , 有 Windows、Linux 
等 多 个 平台 的 版 本 ， 其 特点 是 轻便 、 安 全 、 分 栏 浏览 、 第 三 方 扩展 非常 多 ， 可 以 极 大 地 提高 浏览 的 乐趣 。 
除 此 之 外 ， 由 于 是 开源 组 织 维护 Firefox， 所 以 它 对 错误 的 修正 是 极为 迅速 的 ， 新 功能 的 实现 也 都 
是 基于 用 户 的 要 求 。 由 于 Firefox 本 身 的 优秀 特质 , 吸引 了 许多 人 义务 为 它 宣传 , 不 断 扩 大 它 的 影响 力 ， 
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1.10 下 浏览 器 图 1.11 Firefox 浏览 器 


技巧 : 在 上 面 所 讲 的 两 种 浏览 器 中 ， 正 浏览 器 使 用 最 简单 ， 占 用 计算 机 资源 少 ,而 Firefox 以 其 个 性 化 
设置 也 吸引 了 众多 爱好 者 ， 其 缺点 是 占用 了 较 多 的 计算 机 资源 ， 容 易 造 成 计算 机 运行 缓慢 。 用 
户 在 使 用 时 可 以 根据 需求 选择 不 同 的 浏览 器 查看 设计 的 页 面 效果 。 


1.4 HTML、XML 和 XHTML 语言 


最 初 ，HTML 仅 允 许 研究 人 员 以 一 种 非常 高 效 的 方式 在 互联 网 上 共享 信息 ， 但 是 这 一 切 在 网 页 浏 
览 器 变 得 复杂 、 多 样 化 之 后 ， 设 计 人 员 便 可 以 在 页 面 中 放 入 更 多 的 不 同形 式 的 文件 ， 例 如 ， 图 像 、 音 
频 。 因此 , 网 页 开发 人 员 开 始 为 HTML 语言 加 入 更 多 的 标签 , 使 本 来 设计 简单 的 HTML 开始 变 得 丰富 ， 
但 其 带 来 的 不 利 结果 是 使 HTML 使 用 规则 变 得 混乱 ， 这 时 就 需要 新 的 规则 来 约束 网 页 的 定义 ， 使 同样 
内 容 的 网 页 在 不 同 浏览 器 中 显示 一 样 的 结果 ，XML 在 这 个 方向 发 挥 着 重要 的 作用 。 


1.4.1 超 文本 标记 语言 HTML 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 1 章 \ 超 文本 标记 语言 HIML.wmv 

HTML 是 一 种 用 来 制作 超 文本 文档 的 简单 标记 语言 ， 用 其 编写 的 超 文本 文档 称 为 HTML 文档 ， 能 
独立 于 各 种 操作 系统 平台 。 

1990 年 以 来 , HTML 一 直 作 为 World Wide Web 的 标准 表示 语言 , 用 于 描述 Homepage 的 格式 设计 
以 及 它 与 WWW 上 其 他 Homepage 的 连接 信息 。 作 为 一 种 最 为 基础 的 语言 ， 用 户 使 用 HTML 描述 的 文 
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件 ， 需 要 通过 WWW 浏览 器 显示 出 效果 。 

所 谓 超 文本 ， 是 因为 可 以 加 入 图 片 、 声 音 、 动 画 、 多 媒体 等 内 容 ， 还 可 以 从 一 个 文件 跳 转 到 另 一 
个 文件 ， 与 世界 各 地 主机 的 文件 连接 。HTML 的 作用 是 展示 页 面 的 表现 形式 ， 如 页 面 的 布局 、 页 面 的 
颜色 、 页 面 中 的 内 容 等 。 

HTML 已 经 成 为 全 球 信息 网 的 基础 , 它 提 供 标准 化 的 方法 将 信息 格式 化 并 经 由 Pternet 传送 给 全 世 
界 的 使 用 者 。HTML 为 传送 和 接收 信息 带 来 了 革命 性 的 变化 ， 但 其 主要 是 被 设计 为 资料 显示 之 用 。 


1.4.2 可 扩展 标识 语言 XML 


亏 H 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 可 扩展 标识 语言 XML.wmv 

HTML 的 焦点 几乎 完全 集中 在 信息 应 如 何 显示 上 ， 而 不 是 信息 的 内 容 及 结构 上 ， 所 以 新 规则 中 需 
要 引入 XML。XML 和 HTML 的 作用 是 不 一 样 的 ， 二 者 区 别 很 大 。 

XML 目前 推荐 遵循 的 是 W3C 于 21 世纪 初 发 布 的 XML 1.0。XML 和 HTML 一 样 ， 都 是 来 自 于 
SGML。 它 最 初 设计 的 目的 是 补充 HTML 的 不 足 ， 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 ， 后 来 逐 
渐 用 于 网 络 数据 的 转换 和 描述 。 它 是 一 种 能 定义 其 他 语言 的 语言 。 目 前 在 网 站 信息 传递 中 常用 的 RSS 
就 是 典型 的 XML 应 用 。 如 果 说 HTML 是 用 来 设计 页 面 的 布局 和 视觉 效果 ， 那 么 XML 则 是 用 来 描述 
页 面 的 数据 形式 和 结构 。 

需要 注意 的 是 ，XML 并 不 是 标记 语言 ， 所 以 它 不 是 HTML 的 升级 。 它 更 多 的 作用 是 对 HTML 做 
一 些 其 他 功能 的 补充 ， 而 仅仅 使 用 XML 是 无 法 写 出 页 面 的 。XML 文档 代码 形式 如 下 : 
<?XML version="1.0"?> 
<myfile> 
<title> 我 的 文档 </title> 
<author>Depp</author> 
<email>depp59@gmail.com</email> 


<date>20090109</date> 
</myfile> 


上 面 的 代码 说 明 如 下 所 示 : 

第 1 行 是 XML 文档 的 声明 ， 这 和 HITML 文档 类 似 。 

第 2 行 是 代码 的 根 元 素 ， 类 似 于 HTML 中 的 <html> 开 头 标记 (参考 本 章 实 例 1-1)。 

第 2 行 之 后 的 标记 是 描述 这 段 内 容 的 标签 ， 注 意 这 些 标 签名 称 都 是 可 以 随意 定义 的 。 如 果 读 者 愿 
意 ， 甚 至 可 以 用 中 文 写 成 如 “< 标题 > 我 的 文档 </ 标 题 >” 的 形式 ， 而 这 在 HTML 中 是 不 可 以 
的 。 

说 明 : XML 数据 是 使 用 脚本 实现 HTML 中 调用 和 互动 的 ， 所 以 使 用 XML， 必 须 掌握 一 门 脚本 语言 的 使 
用 技巧 。 


1.4.3 ”可 扩展 超 文本 标识 语言 XHTML 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 1 章 \ 可 扩展 超 文本 标识 语言 XHTML.wmv 
XHTML 是 2000 年 W3C 公布 发 行 的 ， 不 需要 编译 便 可 以 直接 由 浏览 器 执行 (属于 浏览 器 解释 型 
语言 ) ， 是 一 种 增强 了 的 HTML。 其 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 更 多 的 需求 ， 是 基于 XML 


© 
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的 应 用 。 


注意 : XHTML 是 HTML 的 一 个 升级 版 本 ， 二 者 之 间 的 区 别 很 小 ， 有 时 候 在 使 用 上 ， 很 难 分 清 它们 之 间 
的 界线 。 


XML 虽然 数据 转换 能 力 强大 , 完全 可 以 替代 HIML, 但 面 对 成 千 上 万 已 有 的 站 点 , 直接 采用 XML 
还 为 时 过 早 。 因 此 开发 者 在 HTML 4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 了 一 些 扩展 ， 由 此 得 到 了 
XHTML。 简 单 地 说 ， 建 立 XHTML 的 目的 是 为 了 实现 HTML 向 XML 的 过 渡 。 

正 是 因为 这 样 ，XHTML 文档 必须 使 用 小 写 ， 因 为 XML 是 大 小 写 敏感 的 ， 如 <H1> 和 <h1> 是 不 同 
的 标签 。 此 外 ，XHTML 中 要 求 标签 必须 有 始 有 终 。 当 然 从 页 面 设计 者 的 角度 来 说 ， 无 论 HTML 还 是 
XHTML 的 代码 写法 都 是 正确 的 。 为 了 使 写法 更 严谨 ， 使 用 XHTML 的 写法 要 求 未 党 不 可 。 


1.5 编写 一 个 简单 的 页 面 


区 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 编 写 一 个 简单 的 页 面 .wmv 

本 节 主 要 展示 一 个 页 面 制作 的 完整 代码 ， 其 中 涉及 一 个 重要 的 概念 一 一 网 页 的 超 链接 。 单 独 的 页 
面 如 同一 本 书 中 的 一 页 ， 把 所 有 的 页 面 链 接 在 一 起 ， 如 同 把 所 有 的 书页 装订 在 一 起 ， 使 之 成 为 书 ， 而 
所 有 的 页 面 链接 在 一 起 称 为 网 站 。 

超 链接 是 网 页 独 有 的 特色 技术 ， 如 在 下 面 的 实例 中 ， 单 击 “ 这 是 我 的 第 一 个 网 页 ， 我 喜欢 HTML! 
您 可 以 单 击 这 里 ” 超 链接 ， 页 面 会 跳 转 到 搜狐 主页 。 首 先 打 开 记 事 本 ， 输 入 实例 1-2 中 所 示 的 页 面 源码 。 

【实例 1-2】 本 实例 中 编写 了 一 个 简单 的 HTML 页 面 ， 在 网 页 中 创建 了 一 个 超 链接 ， 单 击 超 链接 
就 可 以 跳 转 到 相应 的 页 面 。 


re 实例 1-2: 一 个 简单 的 HTML 页 面 
源码 路 径 : 光盘 \ 源 文件 01\1-2 html 


1 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 <html xmlns="http://www.w3.org/1999/xhtml"> 

4 <head> 

5 <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
6 <title>Hello! 欢迎 使 用 HTML</title> 

7 </head> 

8 <body> 

9 <p><H1> 这 是 我 的 第 一 个 网 页 ,我 喜欢 HTML! 您 可 以 单 击 这 里 
10 <H2><a href="http://www.sohu.com "> 

i 浏览 进入 搜狐 ， 查 找 您 感 兴趣 的 东西 ! 

但 </a> 

</p> 

14 </body> 

15 </html> 


注意 : <a herf=""> 的 功能 是 链接 其 他 页 面 ， 本 书 会 在 后 面 的 章节 中 详细 介绍 。 
【运行 程序 】 编 写 完 该 代码 后 ， 进 行 保存 ， 命 名 为 “实例 1-2.html”， 如 图 1.12 所 示 。 保 存 完成 


® 
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后 ， 运 行 该 页 面 ， 效 果 如 图 1.13 所 示 。 
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这 是 我 的 第 一 个 网 页 , 我 
喜欢 HTML! 您 可 以 单 击 这 
里 


ME gm - 


保 让 类 型 0):。 [GUI Ohinn bial hin [各 入 查 
站 点 要 是 录 
hapyjwwwschucerm/ 碟 100% ~ 
图 1.12 编写 一 个 简单 的 页 面 图 1.13 第 一 个 页 面 效果 


【深入 学 习 】 输 入 结束 后 , 在 记事 本 中 将 文件 另存 为 以 .html 为 后 缀 名 的 网 页 文件 , 如 图 1.12 所 示 。 
将 页 面 保存 为 一 个 具体 的 页 面 文件 存放 在 计算 机 中 ， 并 且 命名 为 “实例 1-2.html”。 


注意 : .html 后 组 是 需要 设计 者 手动 去 修改 的 ， 系 统 默认 情况 下 是 文本 后 缓 .txts 


在 浏览 器 中 打开 页 面 的 效果 如 图 1.13 所 示 ， 单 击 “ 浏 览 进入 搜狐 ， 查 找 您 感 兴趣 的 东西 ! ” 超 链 
如 果 用 户 的 计算 机 已 经 联网 ， 则 页 面 会 转 入 搜狐 的 主页 。 


接 


1.6 人 小 结 


本 章 是 HTML 的 入 门 部 分 ， 主 要 内 容 如 下 : 

网 页 的 概念 、 静 态 网 页 、 动 态 网 页 及 常用 的 网 页 开发 工具 ， 读 者 通过 这 部 分 内 容 可 以 了 解 HTML 
页 面 的 内 容 形式 和 开发 工具 。 

通过 了 解 网 页 浏览 器 的 工作 原理 和 常见 的 浏览 器 ， 认 识 浏览 网 页 的 工作 方式 。 

HTML、XML 和 XHTML 之 间 的 联系 ，XML 是 语言 规范 更 严谨 的 HTML，XHTML 是 HTML 到 
XML 的 过 渡 。 

本 章 最 后 通过 一 个 HTML 页 面 的 例子 ， 展 示 了 一 个 页 面 从 创建 到 最 终 成 型 、 显 示 在 浏览 器 中 的 过 
程 。 

在 接 下 来 的 章节 中 将 为 读者 揭 开 HTML 的 神秘 面纱 ， 学 习 HIML 语言 的 使 用 技术 。 


1.7 本 章 习 题 


习题 1-1 在 计算 机 上 安装 并 运行 Dreamweaver CS6 软件 ， 出 现 如 图 1.7 所 示 的 运行 界面 。 


入 1 二 了 多 网 页 了 


习题 1-2 ”静态 网 页 和 动态 网 页 的 后 缀 名 分 别 有 哪 几 种 ? 

习题 1-3 ”创建 一 个 静态 网 页 和 一 个 动态 网 页 ， 效 果 如 图 1.14 所 示 。 

习题 1-4 HTML 页 面 的 开发 工具 有 哪 几 种 ? 

习题 1-5 ”制作 一 个 简单 的 网 页 ， 网 页 内 容 只 包含 一 行文 字 一 一 “这 是 我 的 第 一 个 网 页 ”， 效 果 如 
图 1.15 所 示 。 


(= 
的 加 避 FA 清 SHTML+CSS+J DO 
Es 
|_ASP | 愿 . 这 是 著 的 第 一 个 网 页 
动态 网 页 asp 更 志 网 页 html 
图 1.14 静态 网 页 和 动态 网 页 文件 图 标示 意图 图 1.15 网 页 效果 示意 图 


【分 析 】 在 Dreamweaver CS6 软件 拆 分 视图 中 ， 编 写 一 段 简单 的 代码 ， 其 中 网 页 内 容 只 包含 “这 
是 我 的 第 一 个 网 页 ”， 保 存 后 预览 显示 效果 。 
【关键 代码 】 


<body> 
这 是 我 的 第 一 个 网 页 
</body> 


第 己 章 ”通过 学 习 他 人 的 网 页 了 解 
HTML 能 做 什么 


HTML 最 初创 建 的 目的 是 创建 一 种 文本 描述 语言 ， 发 展 至 今 ， 成 为 了 一 种 标记 语言 ， 以 十 分 直观 
的 方式 展示 浏览 器 页 面 中 的 内 容 。 在 HTML 出 现 以 前 , 创建 一 个 可 以 展示 文档 内 容 、 包 含 多 媒体 信息 、 
具备 丰富 多 彩 动态 效果 的 文件 效果 是 一 件 难以 想象 的 事情 ， 这 意味 着 如 果 想 通过 网 络 传递 信息 ， 只 能 
通过 Word 这 类 软件 。HTML 的 出 现 令 很 多 不 擅长 使 用 软件 的 人 一 样 可 以 享受 网 络 带 来 的 快捷 性 和 便 
利 性 。 本 章 将 介绍 HTML 语言 的 入 门 基础 ， 主 要 知识 点 如 下 。 

如 何 查看 网 页 的 源码 。 

HTML 语言 的 使 用 方法 。 

学 习 HTML 页 面 基本 的 结构 和 标签 。 

通过 HTML 页 面 的 实例 了 解 如 何 制作 简单 的 页 面 。 


2.1 用 记事 本 打开 一 个 页 面 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 2 章 \ 用 记事 本 打开 一 个 页 面 .wmv 

文件 扩展 名 是 操作 系统 用 来 标识 文件 格式 的 一 种 机 制 。 扩 展 名 一 般 跟 在 文件 名 的 后 面 ， 由 一 个 分 
隔 符号 隔 开 。 如 film.avi，avi 说 明 film 是 一 个 视频 ， 扩 展 名 就 如 同文 件 的 身份 说 明 ， 区 别 文件 的 类 别 
和 作用 。 

HTML 页 面 的 文件 后 绥 名 是 .html 或 者 htm， 一 般 情况 下 ， 系 统 默认 使 用 网 页 浏览 器 打开 。 这 种 情 
况 下 ， 使 用 者 无 法 看 到 页 面 代码 ， 看 到 的 是 一 个 页 面 制作 的 最 后 展示 结果 。 

【实例 2-1】 本 实例 制作 了 一 个 简单 的 网 页 。 

6 实例 2-1: 一 个 简单 的 网 页 

源码 路 径 : 光盘 \ 源 文件 ,022-1.html 


<IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
< 
body{ 
background-image:url( 图 片 /MIL.JPG); 1/ 放 入 一 张 背 景 图 片 


= 


口 


第 2 章 通过 学 习 他 人 的 网 页 了 解 于 站 帮 设 让 作 全 


background-repeat: no-repeat' 
} 
#Layer1 { 
position:absolute; // 确 定 页 面 层 的 位 置 
margin:0; 
left:247px; 
top:395px; 
width:165px; // 设 置 页 面 的 宽度 
height:89px; // 设 置 页 面 的 高 度 
z-index:1; 


3 
.Style1 { 
font-size: 24px; /定义 文本 字体 的 样式 
font-weight: bold; 
color #FFFFFF:; // 设 置 页 面 文 本 的 颜色 
} 
#Layer2{ 
position:absolute; 
left:408px; // 设 置 Layer2 在 页 面 中 的 位 置 
top:58px; 
width:190px; 
height:170px; 
z-index:2; 儿 z 轴 方向 的 高 度 
} 
-> 
</style> 
</head> 
<body> 
<div class="style1" id="Layer1"> 
<form id="form1" name="form1" method="post" action=""> 
<!- 页 面 中 的 表单 --> 
<label> 
<span class="style1"> 写 点 什么 吧 
</span> 
<textarea name="textarea" rows="3"></textarea> 
</label> 
</form> 
</div> 
<div class="style1" id="Layer2"> 嗯 ... 我 想 ， 您 会 喜欢 上 做 网 页 的 </div> 


【运行 程序 】 浏 览 实例 2-1， 效 果 如 图 2.1 所 示 ， 这 是 一 个 静态 页 面 。 
【深入 学 习 】 通 过 记事 本 打开 网 页 文件 可 以 看 到 代码 ， 右 击 网 页 空白 处 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 查 看 源 文 件 ” 命 令 。 系 统 会 默认 在 记事 本 中 打开 源码 ， 如 实例 2-1 代码 所 示 ， 在 这 个 页 面 的 代码 


中 包含 文本 内 容 、CSS 的 样式 表 和 一 个 简单 的 提交 表单 。 


一 个 完整 的 HTML 文档 包含 标签 和 页 面 内 容 。 放 在 “< >” 内 即 是 HTML 语言 标签 ， 用 来 编辑 修 


饰 页 面 内 容 。 页 面 内 容 指 页 面 开 发 者 想 放 入 页 面 的 文本 、 图 像 和 多 媒体 文件 等 ， 如 实例 2-1 中 ， 页 面 
内 容 是 “ 写 点 什么 吧 ” 和 “ 嗯 .… 我 想 ， 您 会 喜欢 上 做 网 页 的 ”两 句 话 和 作为 页 面 背景 的 图 片 。 
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图 2.1 学 习 第 一 个 页 面 


看 上 去 似乎 编辑 页 面 需要 使 用 很 多 标签 ， 使 用 HTML 是 一 件 很 复杂 、 工 序 很 麻烦 的 一 件 事 。 事 实 
上 ， 远 远 没 有 那么 复杂 。 虽 然 现在 还 不 必 了 解 这 段 代码 的 含义 ， 但 还 是 做 个 简单 的 说 明 。 

在 实例 2-1 中 ， 前 3 行 代码 ， 即 <head> 之 前 的 部 分 是 声明 代码 版 本 的 部 分 ， 第 4 一 37 行 这 部 分 代 
码 ， 即 从 <head> 到 </head> 结 束 ， 是 <head> 标 签 内 的 代码 部 分 ， 针 对 所 要 设计 的 页 面 ，<head> 标 签 中 定 
义 了 两 个 层 的 区 域 : Layerl 和 Layer2， 分 别 是 第 13 一 21 行 和 第 27 一 34 行 。 同 时 ， 定 义 了 一 个 CSS 样 
式 表 ， 第 22 一 26 行 用 来 编辑 文本 样式 。 

第 38 一 50 行 ， 即 <body> 标 签 内 的 代码 ， 为 页 面 的 主要 内 容 ， 通 俗 来 说 ， 可 以 认为 <body> 内 是 设计 
者 放 入 的 需要 通过 浏览 器 展示 在 互联 网 上 的 内 容 。 
技巧 : HTML 并 没有 很 严格 的 格式 规范 和 很 复杂 的 算法 ,本 书 会 在 后 面 的 章节 中 继续 详细 分 析 实 例 2-1。 


2.2 初 识 HIML 


HTML 不 是 一 门 程序 语言 ， 学 习 HIML 不 需要 任何 编程 基础 ， 相 对 于 计算 机 语言 ， 如 C++ 或 者 是 
Java 来 说 ， 要 简单 许多 ， 然 而 简单 并 不 意味 着 不 重要 。 试 想 ， 如 果 互 联网 中 没有 了 网 页 ， 该 成 什么 样 ? 
这 简直 无 法 想象 。 


2.2.1 HTML 语法 


全 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 2 章 \HTML 语法 .wmv 
实例 2-1 中 ， 有 一 些 单词 放 在 <...> 中 ， 看 上 去 很 像 某 种 约束 好 的 特殊 定式 ， 如 果 尝 试 多 打开 一 些 
页 面 ， 会 发 现 很 多 页 面 中 都 有 <body></body> 、<titile><ytitle> 这 样 的 标签 。 在 HTML 语言 中 ， 如 
<body>...</body> 称 为 标签 ， 其 作用 是 为 了 标记 页 面 中 的 内 容 ， 使 浏览 器 能 够 识别 设计 者 的 要 求 ， 并 正 
确 地 在 网 页 中 显示 出 来 。 使 用 标签 需要 遵循 3 点 规则 。 
标签 由 开始 标签 起 头 ， 一 定 要 有 对 应 的 结束 标签 来 收尾 ， 例 如 ， 由 <body> 起 头 的 一 个 标签 ， 一 定 
要 由 </body> 来 收尾 。 


@_ 
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注意 : 有 部 分 标签 默认 情况 下 可 以 省 略 结束 标签 ， 如 <p>、<div> 等 ， 但 是 并 不 表示 这 里 没有 结束 标签 ， 
只 有 <link> 和 <base> 这 两 个 标签 除外 ， 可 参考 2.3.4 节 。 


标签 中 的 属性 值 必须 放 在 引号 内 。 属 性 是 用 来 描述 事物 特征 的 表述 语言 。 例 如 ， 这 个 人 的 身高 竟 
有 2.26 米 .“ 身 高 ”就 是 描述 这 个 人 的 一 个 属性 。“2.26 米 ” 就 是 这 个 属性 的 属性 值 。 如 实例 
2-1 中 的 第 45 行 <textarea name="textarea" rows="3">， 表 明 在 这 个 命名 为 textarea 的 文本 区 域 
行 数 是 3，3 就 是 一 个 属性 值 。 像 这 种 表明 属性 的 值 需要 放 在 引号 内 。 

对 同一 文本 使 用 多 个 标签 时 必须 按照 嵌 套 的 原则 ， 即 一 个 标签 必须 嵌 套 在 另 一 个 标签 内 使 用 。 这 
就 如 同 写 文章 时 使 用 大 小 括号 的 原则 :“{ 大 括号 [中 括号 〈 小 括号 )]}”， 就 是 一 个 典型 的 嵌 
套 。 


2.2.2 HTML 文档 的 结构 


镶 m 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 2 章 \HTML 文档 的 结构 -wmyv 

这 里 用 一 个 类 比 来 描述 HTML 文档 的 结构 ， 制 作 一 个 页 面 ， 可 以 把 页 面 看 成 是 设计 者 正在 描绘 
人 体 的 “半身 像 ”。 首 先 ， 需 要 一 块 “画布 ”用 来 作画 ， 在 文档 中 ， ee rn 
和 结束 。 然 后 ， 在 “画布 ”内 〈<html> 标 签 内 ) 编写 页 面 的 “ 头 部 ” (<head> 标 签 部 分 ) 和 页 面 的 “ 身 
体 ” (<body> 标 签 部 分 ) 。 这 样 ， 一 个 页 面 的 形 就 建 出 来 了 ， 如 图 2.2 所 示 为 对 页 面 结构 形象 的 描述 。 


说 明 : 具体 的 6 个 标签 将 在 2.3.6 节 中 详细 介绍 。 


图 2.2 页 面 代码 可 分 为 <head> 和 <body> 


最 后 ， 在 勾勒 好 的 “形体 ”中 ， 设 计 者 还 需要 给 这 个 “ 形 ” 添 加 一 个 tile， 即 给 页 面 起 名 。 一 
HTML 文档 的 基本 结构 在 记事 本 中 写 出 来 ， 就 如 同 实例 2-2 所 示 。 
【实例 2-2】 本 实例 中 是 一 个 HTML 文档 的 基本 结构 源码 的 展示 。 


re 实例 2-2: 一 个 HTML 文档 的 基本 结构 源码 的 展示 
源码 路 径 : 光盘 \ 源 文件 \02\2-2.html 


| <IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 <htmlxmins="http://www.w3.org/1999/xhtmI"> 

4 <head> <!-head 部 分 是 页 面 头 部 -> 

5 <title>Untitled Document</title> 

6 </head> 

区 <body> <!--body 部 分 是 页 面 身体 -> 

8 </body> 

9 </html> 


注意 : <!-- .… --> 是 在 HTML 文 档 中 对 代码 的 注释 ， 不 起 任何 作用 ， 可 以 放 在 任何 位 置 。 
说 明 : 这 是 一 个 空白 页 面 ， 在 浏览 器 中 不 会 展示 任何 内 容 。 


【深入 学 习 】 在 这 样 的 结构 中 ， 首 先 遇 到 文档 中 的 样本 代码 ， 如 实例 2-2 中 的 第 1、2 行 ， 然 后 是 
文档 中 的 <html> 标 签 ， 如 第 3 行 和 第 9 行 : 再 之 后 是 <head> 标 签 和 <body> 标 签 ， 如 代码 中 的 第 4 一 6 行 
是 <head> 标 签 部 分 , 第 7 一 9 行 是 <body> 标 签 部 分 。 这 两 个 标签 和 <html> 标 签 是 “父子 ” 关系, 即 <html> 
标签 是 父 级 ， 这 两 个 标签 是 子 级 ， 它 们 可 以 放 在 <html> 标 签 内 使 用 。 反 之 ， 如 果 <html> 标 签 放 在 它们 
内 使 用 则 不 行 。 

<html> 
<head> 


</head> 
</html> 


上 面 代码 的 写法 是 正确 的 ， 下 面 的 写法 则 是 错误 的 : 


<head> 
<html> 
</html> 

</head> 


实例 2-2 中 第 5 行 的 <title> 标 签 是 用 来 为 页 面 定 义 标题 的 ， 属 于 <head> 标 签 的 下 一 级 ，<title> 标 签 
通常 放 在 <head> 标 签 内 使 用 ， 反 之 则 不 行 ， 正 确 的 常用 的 形式 如 下 : 
<head> 
<title> 
<ltitle> 
</head> 
<title> 标 签 类 似 于 “页 面 头 部 内 的 眼睛 ”， 属 于 “ 头 ”的 一 部 分 ，<title> 标 签 是 <head> 标 签 的 子 级 。 
所 以 ， 一 个 网 页 基本 结构 标签 的 嵌 套 关系 有 4 层 ， 如 图 2.3 所 示 为 页 面 层级 结构 。 


说 明 : 在 <head> 和 <body> 标 签 下 有 许多 不 同 的 父子 关系 的 标签 ， 在 这 里 并 没有 全 部 罗列 。 


当然 ， 如 果 设 计 者 希望 页 面 被 描绘 得 更 生动 ， 就 需要 了 解 更 多 的 HTML 语言 的 作用 和 使 用 它们 的 
方法 。 但 是 ， 任 何 页 面 的 结构 ， 或 者 说 “半身 像 ”总 是 由 “ 头 ” 和 “身体 ”组 成 的 ， 这 个 结构 是 不 会 
变 的 。 
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HTML 文 档 基本 结构 标签 的 关系 
HTML 文 档 


开始 标签 <chtal》 样本 代码 
头 标签 <head》 体 标签 Cbody> 


标题 标签 <title>》 其 他 标签 


图 2.3 HTML 文档 基本 结构 标签 的 关系 
2.3 HTML 文档 基本 结构 标签 的 作用 


页 面 文档 的 基本 结构 可 分 为 4 层 关系 ， 这 其 中 涉及 5 个 重要 的 结构 性 标签 用 来 构成 一 个 页 面 ， 
分 别 是 样本 代码 、 开 始 标签 、 头 标签 、 标 题 标签 和 主体 标签 ， 一 个 完整 的 页 面 通常 必须 具备 这 5 个 
标签 。 

样本 代码 : 用 来 声明 代码 的 版 本 。 

开始 标签 : 定义 页 面 从 哪里 开始 到 哪里 结束 。 

头 标签 和 头 标签 的 对 象 : 有 6 个 特殊 的 标签 可 以 放 在 头 标签 中 使 用 。 

标题 标签 : 设置 网 页 的 标题 名 。 

主体 标签 : 用 来 表现 网 页 的 主体 内 容 。 


2.3.1 给 页 面 一 个 声明 一 一 样本 代码 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 2 章 \ 给 页 面 一 个 声明 一 样本 代码 .wmv 
在 网 页 代码 文档 中 ， 通 常 最 先 看 到 的 就 是 样本 代码 。 如 实例 2-3 中 的 语句 ， 就 是 一 段 样 本 代码 的 


国 实例 2-3: 样本 代码 的 展示 
源码 路 径 : 光盘 \ 源 文件 02\2-3.html 


1 ， <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


【深入 学 习 】 样 本 代码 看 起 来 很 复杂 ， 似 乎 很 难 理解 。 实 际 上 ， 它 只 是 起 到 了 一 个 声明 的 作用 ， 
告诉 浏览 器 所 书写 的 HTML 代码 的 版 本 。 代 码 中 DOCTYPE 即 Document Type 的 简写 ， 意思 是 文档 类 
型 。 整 段 定义 了 设计 者 使 用 文档 类 型 的 定义 ， 然 后 把 这 些 信息 传递 给 浏览 器 ， 浏 览 器 根据 设计 者 的 定 
义 来 解析 代码 ， 展 现 出 相应 的 页 面 。 

这 一 段 的 含义 是 定义 了 网 页 文档 是 XHTML 1.0 Transitional 文档 , 允许 使 用 HTML 4 的 标签 , 是 符 


人 @ 


合 W3C 万维网 联盟 ) 的 标准 的 。 还 有 另 一 种 常用 的 样本 代码 ， 声 明 网 页 文档 是 XHTML 1.0 Strict。 


1 <IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 StricWEN” 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


XHTML 1.0 Transitional 文档 和 XHTML 1.0 Strict 文档 的 区 别 如 同 它们 的 命名 一 样 ， 前 者 是 过 渡 性 
的 ， 允 许 使 用 HTML 4 的 标签 ， 而 后 者 丢弃 了 很 多 旧 的 标签 。 从 长 远 来 看 ， 后 者 是 针对 CSS 的 使 用 原 
则 ， 严 格 规定 的 文档 类 型 。 当 读者 习惯 于 使 用 CSS 来 表现 网 页 时 ， 完 全 可 以 选择 后 者 。 对 于 初学 者 来 
说 ， 为 了 更 容易 地 理解 HTML 文档 ， 适 合 使 用 XHTML 1.0 Transitional 文档 。 


说 明 : 本 书 中 不 加 特殊 说 明 ， 都 遵循 XHTML 1.0 Transitional 文 档 。 

此 外 ， 还 有 一 种 比较 常见 的 声明 方式 ， 即 XHTML 1.1 文档 。 

<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.1 //EN" 

这 是 最 新 版 本 的 XHTML 1.1， 有 些 时 候 , 会 出 现 浏 览 器 不 能 识别 部 分 HTML 标签 的 问题 。 使 用 样 
本 代码 的 目的 是 为 了 验证 代码 文档 的 准确 性 ， 只 需要 在 开头 声明 即 可 ， 之 后 的 代码 中 无 需 再 次 声明 。 
2.3.2” 踏 出 制作 页 面 的 第 一 步 一 一 开始 标签 <html> 


圳 4 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 2 章 \ 踏 出 制作 页 面 的 第 一 步 一 开始 标签 <html>.wmv 

从 <html> 标 签 开始 ， 页 面 就 进入 设计 者 操作 的 领域 中 。<html> 标 签 的 作用 就 相当 于 设计 者 在 告诉 
浏览 器 ， 整 个 网 页 是 从 这 里 开始 的 ， 然 后 到 </html> 标 签 结 束 ， 好 像 在 记事 本 这 个 “画板 ”中 ， 来 确定 
设计 者 的 “画布 ”的 范围 。 一 般 来 说 ，<html> 标 签 放 在 样本 标签 之 后 。 在 严格 的 网 页 代码 中 ， 通 常 以 
如 下 的 形式 出 现 : 

<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en"> 
说 明 : xmlns 和 xml:lang 是 XHTML 网 页 的 标准 要 求 ， 用 于 指定 与 该 标签 相关 的 一 些 信息 。 


2.3.3 页 面 的 “脑袋 ” 头 标签 和 头 标签 的 对 象 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 2 章 \ 页 面 的 “脑袋 ”一 头 标签 和 头 标签 的 对 象 .wmv 

在 2.2.2 节 中 一 个 页 面 的 结构 可 类 比 成 一 个 “半身 像 ”。<head> 标 签 是 页 面 的 “ 头 部 ”， 那 么 从 制 
作 页 面 的 功能 上 来 说 ， 头 标签 内 的 对 象 就 如 同 是 调 色 板 中 的 颜色 。 

<head> 标 签 的 对 象 有 些 特别 ， 一 般 来 说 ， 只 有 6 个 标签 能 放 在 <head> 标 签 内 ， 除 了 本 章 前 面 介绍 
的 标签 <title> 和 <meta>， 还 有 <link>、<base>、<style> 和 <scrip 亿 标签， 设计 者 使 用 这 些 标签 定义 出 不 同 
的 “颜色 ”来 描绘 页 面 。 
注意 : <head> 标 签 没有 功能 性 作用 ， 重 点 是 了 解 <head> 标 签 的 对 象 ， 即 可 以 放 在 <head> 标 签 内 的 是 哪 

些 标签 ， 具 体 有 什么 作用 。 


1. <meta> 标 签 
<meta> 是 HTML 文档 <head> 标 签 内 的 一 个 辅助 性 标签 。<meta> 标 签 有 两 个 重要 的 属性 : name 和 
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http-equiv， 通 常用 于 优化 页 面 被 搜索 的 可 能 。 具 体 的 写法 格式 一 般 是 在 name 后 输入 属性 ， 在 content 
后 输入 对 于 属性 具体 描述 的 词汇 。 如 实例 2-4 所 示 的 <meta> 标 签 的 使 用 。 
【实例 2-4】 本 实例 中 给 出 了 <meta> 标 签 下 name 属性 的 使 用 方法 。 


rg 实例 2-4: <meta> 标 签 下 name 属性 的 使 用 方法 
源码 路 径 : 光盘 \ 源 文件 \02\2-4.html 


1 <head> 

2 <meta name="keywords" content="nine, twenty-three"> 
3 <!- 搜 索引 擎 的 关键 字 说 明 -> 

4 < meta name="description" content="....... 

5 <!-- 向 搜索 引擎 描述 主要 内 容 --> 

6 < meta name="generator" content="Dreamweaver" > 
区 <!-- 向 页 面 描述 生成 的 软件 名 一 > 

8 < meta name="author" content="depp"> 

9 <!-- 向 页 面 说 明 设计 者 姓名 一 > 

10 < meta name="robots" content="all"> 

有] <!-- 向 页 面 说 明 限制 搜索 的 方式 --> 

12 </head> 


【深入 学 习 】<meta> 标 签 下 不 同 的 属性 分 别 有 不 同 的 作用 ， 它 们 令 页 面 更 加 生动 ， 更 具 亲 和 力 。 

keywords: 向 搜索 引擎 说 明 页 面 的 关键 字 ，content 后 输入 供 搜 索 的 具体 关键 字 。 

description: 向 搜索 引擎 描述 页 面 的 主要 内 容 。 

generator: 向 页 面 描述 生成 的 软件 名 ，content 后 面 输入 有 具体 的 软件 名 称 。 

author: 网 页 的 设计 者 ，content 后 面 输入 设计 者 的 具体 姓名 。 

robots: 限制 搜索 的 方式 ，content 后 面 通常 可 输入 all、none、index、noindex、follow 或 nofollow， 
不 同 的 属性 分 别 有 不 同 的 作用 ， 限 制 页 面 被 搜索 的 方式 。 

<meta> 标 签 下 另 一 个 属性 http-equiv， 其 作用 是 反馈 给 浏览 器 一 些 明确 的 信息 ， 来 帮助 浏览 器 更 精 

确 地 展示 页 面 。 如 实例 2-5 是 <meta> 标 签 下 http-equiv 属性 的 使 用 规则 。 
【实例 2-5】 本 实例 中 给 出 了 <meta> 标 签 下 http-equiv 属性 的 使 用 方法 。 


区 实例 2-5: <meta> 标 签 下 http-equiv 属性 的 使 用 方法 
源码 路 径 : 光盘 \ 源 文件 \02\2-5 html 


1 <head> 
受 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
3 </head> 


【深入 学 习 】 代 码 第 2 行 的 作用 是 告诉 浏览 器 该 页 面 所 使 用 的 字符 集 是 gb2312， 即 国际 汉字 码 。 
如 果 当 使 用 者 浏览 有 这 段 代码 的 页 面 时 ， 计 算 机 内 又 没有 gb2312 字符 集 ， 浏 览 器 会 提示 使 用 者 “需要 
下 载 xx 语 支持 ”。 

http-equiv 属性 下 ， 还 有 其 他 一 些 常用 的 特殊 效果 ， 如 网 页 定式 跳 转 效 果 。 实 例 2-6 演示 的 是 页 面 
自动 跳 转 的 功能 。 

【实例 2-6】 本 实例 中 演示 了 页 面 自动 跳 转 的 功能 。 


re 实例 2-6: 页 面 的 自动 跳 转 
源码 路 径 : 光盘 \ 源 文件 \02\2-6.html 


+CSS 网 页 设计 详解 


<html> 
<head> 
<title> 跳 转 页 面 的 实例 </title> 
<meta http-equiv="refresh" content="6; url=http://www.baidu.com/"> 
</meta> 
</head> 
<body> 这 个 页 面 在 6s 后 自动 跳 转 到 百度 ，1、2、3、4、5、 6..… 
</body> 
</html> 
【深入 学 习 】 这 个 例子 中 ， 第 4 行 是 实现 页 面 跳 转 的 代码 行 。 
refresh: 是 对 属性 的 具体 描述 ， 说 明 是 令 页 面 自动 跳 转 的 效果 。 
content: 后 面 输入 等 待 的 时 间 ，url 后 面 输入 跳 转 的 页 面 链接 地 址 。 
content="6; Url=.… ": 作用 是 令 页 面 在 6 秒 后 自动 跳 转 到 设 定 好 的 某 个 页 面 。 如 果 去 掉 url 跳 转 的 
链接 地 址 ， 所 起 的 作用 是 令 页 面 每 6 秒 刷新 一 次 。 


说 明 : <meta> 标 签 对 于 一 般 页 面 制作 者 来 说 ， 实 用 意义 不 大 。 在 大 多 数 网 页 中 ，<meta> 标 签 也 只 是 用 
来 定义 版 权 信息 。 


2. <link> 标 签 


<link> 标 签 定义 一 个 外 部 文件 的 链接 , 经 常用 于 链接 外 部 CSS 样式 。 如 下 列 语句 表明 引用 temp.css 
文件 的 外 部 链接 。 


<link rel="stylesheet" type="text/css" title="temp" href="/temp.css/"> 

3. <base> 标 签 

<base> 标 签 为 整个 页 面 定义 所 有 链接 的 基础 定位 。 其 主要 的 作用 是 为 了 确保 文档 中 所 有 的 相对 
URL， 都 可 以 被 分 解 成 正确 的 文档 地 址 ， 使 在 文档 本 身 被 移动 或 重 命名 的 情况 下 也 可 以 正确 解析 。 

<base href="http://www.ou-uo.com "/> 


<base> 标 签 经 常 使 用 在 创建 文档 集合 中 ， 为 了 不 破坏 文档 中 任何 链接 ， 使 用 者 通过 在 每 个 文档 中 
放置 正确 的 <base> 标 签 ， 便 可 以 在 目录 甚至 服务 器 之 问 移动 整个 文档 集合 。 


注意 : <link> 和 <base> 这 两 个 标签 在 写法 上 不 需要 封闭 。 
4. <style> 标 签 
<style> 标 签 用 来 定义 CSS 的 样式 。 使 用 方法 如 下 , 表明 在 页 面 中 使 用 了 一 个 样式 表 来 设置 网 页 样式 。 
<style type="text/css"> 


< 上 


OOO- 


.style1 { 
font-size: 24px; /定义 页 面 文本 的 字体 大 小 
font-weight: bold; /定义 页 面 文本 的 粗细 
color: #FFFFFF:; // 定 义 页 面 文本 的 字体 颜色 
} 
一 > 
</style> 


© 
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<style type="text/css"> 是 XML 的 标准 格式 ， 是 更 严格 的 写法 。 一 般 情况 下 ， 省 略 text/css 也 是 可 以 
的 ， 大 部 分 浏览 器 都 能 识别 <style> 标 签 ， 不 过 并 不 提倡 这 种 写法 ， 严 格 的 写法 才能 避免 出 现 疏 忽 。 
说 明 : 样式 表 是 CSS 学 习 中 一 个 重要 的 部 分 ， 在 本 书后 面 章节 有 大 量 内 容 介绍 CSS 样 式 表 的 运用 法 则 。 
5. <script> 标 签 


<script > 标签 用 来 定义 页 面 内 的 脚本 ， 如 页 面 中 常用 的 脚本 语言 JavaScript， 通 过 <scrip 人 的 事件 属 
性 放 入 HTML 文档 中 。 使 用 方法 如 下 : 

<script type="text/javacscript"> 

</script> 
说 明 : <style> 和 <script> 标 签 会 在 后 面 的 章节 中 详细 介绍 。 


2.3.4 给 页 面 起 名 字 一 一 标题 标签 <title> 


鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \ 给 页 面 起 名 字 一 一 标题 标签 <title>.wmv 

<title> 也 是 <head> 标 签 的 对 象 ， 但 如 果 页 面 没 有 标题 ， 那 么 所 有 的 页 面 标题 都 将 默认 为 Untitled 
Document。 所 以 ， 一 个 正规 的 页 面 必须 具备 页 面 标题 ， 而 <head> 标 签 中 的 其 他 5 个 标签 可 以 视 情况 而 
选择 使 用 。 

<title> 标 签 是 本 书 中 的 一 个 表现 性 标签 。 什么 是 表现 性 标签 呢 ? 通俗 来 讲 ， 即 放 在 这 类 标签 中 的 文 
本 ,可 以 通过 浏览 器 展现 给 浏览 者 。<title> 标 签 必须 嵌 套 在 <head> 标 签 中 使 用 ， 其 作用 是 用 来 定义 网 页 
的 标题 ， 也 就 是 给 网 页 起 名 字 ， 如 实例 2-7 所 表示 为 <title> 标 签 的 使 用 方法 。 

【实例 2-7】 本 实例 中 给 出 了 <title> 标 签 的 使 用 方法 。 


实例 27: <tite> 标 答 的 合用 方法 
源码 路 径 : 光盘 \ 源 文件 022-7htnl 


1 ”<html> 
受 <head> 

3 <title>title 标签 的 使 用 <l/title> <!-- 定 义 网 页 标题 名 称 --> 
一 </head> 

5 -</html> 
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图 2.4 ”<title> 标 签 的 使 用 
【深入 学 习 】<title> 标 签 可 以 用 来 描述 页 面 的 主要 内 容 ， 使 用 户 方便 地 添加 到 收藏 夹 。 
注意 : 给 页 面 起 名 字 是 一 个 好 习惯 ,不 仅 便于 对 页 面 的 管理 ,而 且 使 用 户 通过 页 面 标题 就 能 大 致 了 解 


页 面 的 内 容 。 
@ 


ss 网 页 设计 评介 


2.3.5 


页 面 的 “身体 ”一 一 主体 标签 <body> 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \ 页 面 的 “身体 ”一 一 主体 标签 <body>.wmv 

如 果 说 <html> 标 签 定义 了 网 页 的 开始 和 结束 ， 那 么 <body> 标 签 的 作用 则 是 定义 了 网 页 主体 内 容 的 
开始 和 结束 ， 网 页 主体 内 容 是 指 页 面 浏览 者 能 够 在 浏览 器 中 看 到 的 网 页 中 的 全 部 内 容 。 设 计 者 把 网 页 
主体 内 容 放 入 <body> 标 签 内 ， 通 过 浏览 器 展示 在 互联 网 上 。 如 实例 2-8 中 <body> 标 签 内 的 文本 ， 代 码 


中 的 第 6 一 8 行 就 是 页 面 的 主体 内 容 。 


【实例 2-8】 本 实例 中 介绍 了 <body> 标 签 的 使 用 方法 。 


一 中 om、oODm 上 whN 一 


口 


区 | 实例 .8: <body> 标 签 的 使 用 方法 


源码 路 径 : 光盘 \ 源 文件 \02\2-8.html 


<head> 
<title>body 标签 的 使 用 </title> 

</head> 

<body> 
一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 机 械 工 程 师 说 :“ 可 能 是 引 
擎 坏 了 吧 。” 电 子 工程 师 说 : “我 看 可 能 是 电路 板 短路 了 。” 电 脑 工程 师 说 : “ 史 ， 费 那 事 干 
暗 ， 直 接 重启 不 就 完了 。” 

</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 2.5 所 示 ，<body> 标 签 中 的 文本 出 现在 页 面 中 。 


车 去 


一 天 ， 师 一 同 爸 车 子 杯 了 

相 械 工程 “可 甬 星 引 束 电子 工程 师 说 

看 可 能 是 电路 忆 短 踊 7 ，” 电脑 工程 师 说 ，“ 磁 ， 费 那 事 二 
嘛 ， 直 入 重 局 不 就 元 ，” 


图 2.5 <body> 标 签 的 使 用 


【深入 学 习 】<body> 标 签 中 的 内 容 会 通过 浏览 器 展示 在 页 面 上 。 但 是 也 要 注意 ， 这 种 简单 的 文本 


页 面 会 受 


到 很 多 的 限制 ， 例 如 ， 文 本 换行 的 一 些 问 题 。 那 么 如 果 为 了 实现 文本 的 换行 ， 在 编辑 实例 2-8 


的 文档 时 ， 是 否 可 以 写成 如 下 形式 ? 


Lg 
NS 
和 


<html> 
<head> 
<title>body 标签 的 使 用 </title> 
</head> 
<body> 
一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 


机 械 工程 师 说 :“ 可 能 是 引擎 坏 了 吧 。” 电 子 工程 师 说 : “我 看 可 能 是 电路 板 短路 了 。” 
电脑 工程 师 说 : “ 史 ， 费 那 事 干 嘛 ， 直 接 重 启 不 就 完了 。” 
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11 </body> 

12 </html> 

实际 情况 会 不 会 像 代码 文档 写 的 那样 , 文本 自动 隔 开 段落 呢 ? 实际 上 , 最 后 的 结果 还 是 图 2.5 中 的 
效果 ， 浏 览 器 并 不 会 自动 识别 文本 的 版 式 。 所 以 ， 在 <body> 标 签 中 排版 文本 是 不 可 能 的 ， 因 此 ， 为 了 
使 设计 者 能 对 文本 做 大 量 的 修改 ， 需 要 使 用 适用 于 <body> 内 的 标签 。 

<body> 标 签 内 的 对 象 有 很 多 ， 好 比 是 设计 者 手中 的 “画笔 ”， 用 不 同 的 “画笔 ”才能 描绘 出 不 同 
的 图 案 。 


注意 : 同 <head> 一 样 ，<body> 是 用 来 表明 页 面 的 结构 ， 重 点 是 <body> 标 签 的 对 象 ， 即 哪些 标签 可 以 放 
在 其 中 使 用 和 如 何 使 用 。 可 以 说 , 本 书 之 后 的 大 部 分 章节 都 在 介绍 如 何 使 用 <body> 标 签 的 对 象 。 


2.3.6 美化 HTML 文档 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \ 美 化 HTML 文档 -wmv 
养 成 编写 格式 清晰 的 HTML 文档 的 习惯 是 很 重要 的 ， 不 仅 方便 其 他 使 用 者 浏览 ， 也 便于 对 文档 进 
行 修改 。 好 的 文档 能 体现 出 设计 者 的 思维 方式 ， 好 的 HTML 文档 应 具备 以 下 3 个 方面 : 
代码 使 用 准确 规范 ， 不 应 有 错误 的 拼写 。 
代码 结构 清晰 ， 使 人 一 目 了 然 。 
没有 错误 或 者 多 余 的 代码 出 现 。 
当然 ， 有 时 候 代码 错误 、 结 构 混乱 ， 浏 览 器 一 样 可 以 识别 。 例 如 ， 实 例 2-8 中 如 果 省 略 <head> 标 
把 <title> 标 签 放 在 最 后 使 用 ， 写 成 如 下 形式 : 
<html> 
<body> 
一 天 ，3 名 工程 师 一 同 驾车 去 旅游 。 半 路 上 车 子 坏 了 ,抛锚 了 。 机 械 工程 师 说 :“ 可 能 是 引 … 
人 标签 的 使 用 </title> 
</html> 


实例 2-8 最 终 依然 能 正确 地 显示 在 浏览 器 中 。 但 是 ， 对 于 设计 者 来 说 ， 这 样 的 习惯 很 不 好 ， 随 意 
的 发 挥 看 似 提高 了 编写 的 效率 。 实 际 上 ， 在 编辑 大 型 网 站 页 面 多 人 协作 的 情况 下 ， 代 码 的 混乱 会 造成 
很 多 不 必要 的 错误 和 返工 。 
注意 : 从 简单 的 页 面 开始 ， 养 成 良好 的 编写 代码 的 习惯 也 是 成 为 一 个 优秀 的 页 面 开发 人 员 的 必要 条 件 。 


签 


DAwND 一 


2.4 案例 : 制作 第 一 个 页 面 


爸 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 2 章 \ 案 例 : 制作 第 一 个 页 面 .wmv 

本 节 练 习 的 内 容 是 制作 一 则 寓言 小 故事 。 首先， 定义 需要 制作 一 个 怎样 的 网 页 。 一 个 简单 的 页 面 ， 
里 面 有 一 段 文字 ， 这 个 页 面 需要 标题 ， 设 计 好 之 后 ， 就 有 了 一 个 明确 的 构思 。 

(1) 找到 需要 的 素材 ， 这 里 为 一 个 小 故事 ， 内 容 如 下 。 


ss pa gt 


只 小 猪 、 一 只 绵羊 和 一 头 乳 牛 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 提 住 小 猪 ， 它 大 声 号 叫 ， 狐 


烈 地 抗拒 。 纺 半 和 屯 牛 讨厌 它 的 号 叫 ， 便 说 : “他 常常 提 我 们 ， 我 们 并 不 大 呼 小 叫 。” 小 猪 听 了 回答 
道 : “ 捉 你 们 和 捉 我 完全 是 两 回 事 ， 他 捉 你 们 ， 只 是 要 你 们 的 毛 和 乳汁 ， 但 是 捉 住 我 ， 却 是 要 我 的 


命 呢 ! 


立场 不 同 、 所 处 环境 不 同 的 人 ， 很 难 了 解 对 方 的 感受 ; 因此 对 别人 的 失意 、 挫 折 、 伤 痛 ， 不 宜 幸 
灾 乐 祸 ， 而 应 要 有 关怀 、 了 解 的 心情 。 要 有 宽容 的 心 ! 


( 
( 


2) 给 网 页 设置 一 个 标题 ， 根 据 这 个 小 故事 的 内 容 ， 把 标题 设置 为 《宽容 》。 
3) 编写 HTML 代码 。 网 页 的 标题 代码 如 下 : 


<title> 宽 容 </title> 
然后 ， 网 页 的 主体 内 容 就 是 这 个 小 故事 ， 应 该 放 在 <body> 标 签 内 ， 代 码 如 下 : 
<body> 一 只 小 猪 、 一 只 绵羊 和 一 头 乳牛 ， 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 捉 住 小 猪 ， 它 大 声 号 叫 ， 


但 是 捉 住 我 ， 却 是 要 我 的 命 呢 ! ”<br> 

立场 不 同 、 所 处 环境 不 同 的 人 ， 很 难 了 解 对 方 的 感受 ; 因此 对 别人 的 失意 、 挫 折 、 伤 痛 ， 不 宜 幸灾乐祸， 而 应 要 
有 关怀 、 了 解 的 心情 。 要 有 宽容 的 心 ! 

</body> 


说 明 : 


文本 中 出 现 了 <br> 标 签 ， 其 作用 是 令 文 本 换行 ， 本 书 第 3 章 中 会 详细 介绍 文本 排版 的 使 用 方法 。 


(4) 完整 HTML 代码 ， 这 里 就 需要 加 入 样本 代码 和 一 些 必需 的 结构 化 标签 ， 最 后 组 合 在 一 起 形 


成 一 个 
【 


完整 代码 ， 如 实例 2-9 所 示 。 
实例 2-9】 本 实例 中 设计 了 包括 一 则 寓言 故事 的 页 面 。 


re 实例 2-9: 一 则 富 言 故事 的 页 面 
源码 路 径 : 光盘 \ 源 文件 ,02\2-9.html 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> <!-- 页 面 头 部 一 > 
<title> 宽 容 <l/title> <I-- 页 面 标题 -> 
</head> 
<body> <!- 页 面 主体 -> 


一 只 小 猪 、 一 只 绵羊 和 一 头 乳 牛 ， 被 关 在 同一 个 畜 栏 里 。 有 一 次 ， 牧 人 捉 住 小 猪 ， 它 大 声 号 叫 ， 
猛烈 地 抗拒 。 绵 羊 和 乳牛 讨厌 它 的 号 叫 ， 便 说 : “他 常常 捉 我 们 ， 我 们 并 不 大 呼 小 叫 。” 小 猪 
听 了 回答 道 : “ 捉 你 们 和 捉 我 完全 是 两 回 事 ， 他 捉 你 们 ， 只 是 要 你 们 的 毛 和 乳汁 ， 但 是 捉 住 我 ， 
却 是 要 我 的 命 呢 ! ”<br> 
立场 不 同 、 所 处 环境 不 同 的 人 ， 很 难 了 解 对 方 的 感受 ; 因此 对 别人 的 失意 、 挫 折 、 伤 痛 ， 不 宜 
幸灾乐祸， 而 应 要 有 关怀 、 了 解 的 心情 。 要 有 宽容 的 心 ! 

</body> 
</html> 


【运行 程序 】 这 样 ， 整 个 页 面 的 编辑 通过 4 步 流程 就 可 以 完成 了 ， 最 终 显 示 在 浏览 器 中 的 结果 如 
图 2.6 所 示 。 


@ 
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听 了 捉 你 们 和 捉 我 3 

回 事 ， 信 近 斧 Ha 但 是 投 住 我 
人 

立场 不 到 向 3 拓 丰 有 的 人 ， 很 难 了 解 对 方 的 感受 ， 因 


A 拌 折 、 伤 病 ， 不 宜 丰 灾 乐 祖 ， 而 应 要 有 
怀 、 了 甫 的 心情 。 要 有 充 容 的 心 


图 2.6 一 则 寓言 故事 页 面 效果 


【深入 学 习 】 通 过 这 个 页 面 介绍 了 一 个 简单 的 设计 如 何 成 为 一 个 页 面 的 过 程 ， 设 计 的 想法 是 基于 
对 页 面 制 作 技 艺 的 掌握 。 也 许 将 这 个 页 面 整 体 拆 分 开 ， 每 一 步 都 简单 易于 掌握 ， 但 是 如 果 想 做 到 将 这 
些 知 识 整合 在 一 起 付 诸 实践 ， 则 是 需要 不 断 练习 来 实现 的 。 


2.3， 外 结 


本 章 介 绍 了 开发 页 面 时 需要 具备 的 知识 点 。 通 过 本 章 的 学 习 ， 可 以 对 HTML 语言 有 一 个 整体 的 了 
解 ， 由 理解 知识 转向 运用 知识 ， 可 以 亲手 制作 一 个 的 简单 页 面 。 主 要 的 知识 点 如 下 : 
页 面 代码 编辑 器 一 一 记事 本 。 通 过 记事 本 可 以 浏览 页 面 代码 ， 开 发 网 页 。 
了 解 HTML 页 面 中 使 用 标签 的 3 个 基本 的 规则 。 
了 解 一 个 HIML 页 面 基 本 结构 和 基本 结构 的 标签 。 这 里 涉及 一 个 重要 的 概念 : HTML 页 面 主要 由 
<head> 标 签 部 分 和 <body> 标 签 部 分 组 成 ，<head> 标 签 的 对 象 是 为 了 表现 页 面 ，<body> 标 签 对 
象 是 为 了 展示 页 面 的 内 容 ， 其 关系 如 同 “ 调 色 板 ”和 “画笔 ”。 
最 后 通过 一 个 简单 的 实例 ， 介 绍 了 一 个 简单 页 面 从 构思 到 做 出 设计 ， 从 设计 到 给 出 方案 ， 从 实施 
方案 到 最 后 成 品 完成 ， 最 后 在 浏览 器 中 查看 结果 。 
通过 本 章 ， 读 者 已 经 理解 如 何 把 页 面 内 容 放 入 到 页 面 中 ， 在 接 下 来 的 章节 ， 将 学 习 如 何在 页 面 中 
编辑 、 修 饰 放 入 的 文本 。 


2.6 本 章 


习题 2-1 使 用 标签 需要 遵循 3 点 规则 ， 分 别 是 、 和 。 

习题 2-2 页 面 的 5 个 基本 结构 标签 分 别 是 、 S 、 和 

习题 2-3 一 个 页 面 的 基本 结构 是 由 哪些 标签 构成 的 ? 它们 的 层级 关系 又 是 怎样 的 ? 

习题 2-4 下 面 给 出 一 个 简单 网 页 的 代码 ， 请 分 别 标 出 HTML 文件 的 头 部 、 标 题 和 主体 部 分 ， 代 
码 如 下 : 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


DD) 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 习 题 2-4</title> 

</head> 

<body> 

学 习 如 何 制 作 一 个 简单 的 网 页 

</body> 

</html> 


【分 析 】 通 过 2.3 节 内 容 的 学 习 ， 可 以 轻松 地 分 辨 出 上 面 这 段 代码 的 头 部 、 标 题 和 主体 。 
习题 2-5 ”制作 一 个 简单 的 网 页 ， 网 页 的 内 容 包 括 标题 一 一 “天 气 ”、 主 体内 容 一 一 “今天 天 气 很 
我 们 出 去 玩 吧 ， 可 以 穿 上 裙子 。” 网 页 运行 效果 如 图 2.7 所 示 。 


2 [= 2 
Er rE 


ES MIH) 
今天 天 气 很 好 ， 我 们 出 去 玩 吧 ， 可 以 穿 上 裙子 


只 


起 100% 


图 2.7 一 个 简单 的 网 页 


【分 析 】 本 例 的 网 页 很 简单 ， 通 过 <title> 标 签 设置 网 页 标题 ， 通 过 <body> 标 签 设置 主题 内 容 即 可 。 
【关键 代码 】 


<title> 习 题 2-3</title> 


<body> 
今天 天 气 很 好 ， 我 们 出 去 玩 吧 ， 可 以 穿 上 裙子 。 
</body> 
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静态 页 面 中 的 绝 大 部 分 内 容 由 4 类 元 素 组 成 : 文本 ， 图 像 ， 视 频 、 音 频 等 多 媒体 文件 和 超 链接 。 
本 章 从 编辑 文本 的 知识 点 开始 介绍 。 什 么 是 文本 呢 ? 从 词 源 上 说 ， 文 本 表示 “编织 的 东西 ”。 当 然 这 
里 所 说 的 文本 既 不 是 指纹 理 编织 的 页 面 ， 也 不 是 指 某 种 计算 机 语言 ， 而 是 指 书写 下 来 的 任何 语言 。 本 
章 将 学 习 如 何在 页 面 中 编写 文本 ， 主 要 知识 点 如 下 。 

了 解 HIML 语言 ， 区 分 清楚 旧 的 使 用 规则 和 新 规则 CSS 之 间 的 联系 和 不 同 。 

了 解 文本 排版 格式 ， 学 会 如 何 使 用 标签 实现 在 页 面 中 规范 写作 格式 。 

了 解 文本 样式 ， 学 会 如 何 改 变 页 面 中 的 文本 的 基本 属性 和 如 何 使 用 一 些 特殊 的 符号 。 

了 解 文本 列表 ， 学 会 在 页 面 中 使 用 无 序列 表 和 有 序列 表 来 罗列 条 目 。 

通过 实例 ， 学 会 在 页 面 中 编写 文本 、 项 目 列表 。 


3.1 新 旧 方 法 对 比 


颁 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 新 旧 方 法 对 比 .wmv 

早期 的 HTML 版 本 中 使 用 一 些 特殊 的 标签 来 编辑 文本 ， 例 如 ， 使 用 <em>.…</em> 标 签 来 强调 突出 
文本 ， 使 文本 具有 斜体 字 的 效果 。 但 是 这 种 方法 使 用 起 来 非常 烦琐 ， 对 于 不 同 段落 的 编辑 需要 重复 使 
用 ， 工 作 量 很 大 ， 也 给 之 后 的 修改 带 来 很 多 麻烦 。 随 着 HTML 的 发 展 ， 设 计 者 发 掘 了 更 多 的 标签 来 美 
化 文本 。1994 年 ， 一 位 叫 哈 坤 。 利 的 设计 者 提出 “ 层 释 式 ” 概 念 的 样式 表 来 编辑 文本 。 在 1996 年 底 ， 
这 种 方法 被 正式 推出 ， 发 展 至 今 就 是 现在 大 家 比较 熟悉 的 CSS。 

下 面 通 过 一 个 小 例子 来 感受 一 下 新 旧 方 法 的 区 别 。 如 果 读 者 现在 对 CSS 完全 不 了 解 也 没有 关系 ， 
后 面 的 章节 会 详细 介绍 ， 这 里 有 个 感性 的 认识 就 可 以 了 。 在 旧 方 法 中 ， 使 用 大 量 的 特殊 标签 来 编辑 文 
本 ， 如 实例 3-1 使 用 的 是 旧 方 法 。 在 新 方法 中 ， 则 使 用 CSS 来 编辑 文本 ， 如 实例 3-2 使 用 的 是 新 方法 。 

【实例 3-1】 旧 方法 一 一 使 用 特殊 标签 编辑 文本 。 


re 实例 3-1: 使 用 特殊 标签 编辑 文本 
源码 路 径 : 光盘 \ 源 文件 \03\3-1.html 


1 <html xmlns="http://www.w3.org/1999/xhtml"> 

2 <head> 

3 <title> 使 用 旧 方 法 </title> <! 一 页 面 的 标题 -> 

4 </head> 

5 <! 一 以 上 是 页 面 的 “ 头 部 ”， 以 下 是 页 面 的 “身体 ” 一 > 

6 <body> 

7 <p><h2><em><strong> 大 家 好 ，html 语言 并 不 难 </strong></em></font></p> 
8 <p><h2><em><strong> 努 力 一 定 能 学 的 很 好 </strong></lem></font></p> 

9 <!--body 中 使 用 了 大 量 的 标签 --> 


ss pa att 


10 


</body> 


11</html> 


说 明 : 


说 明 : 


注意 : 
E 


<h2>、<em> 和 <strong> 这 3 个 标签 分 别 改 变 文 本 字体 大 小 、 斜 体 和 加 粗 的 效果 。 需 要 说 明 的 是 ， 
这 里 相同 的 标签 编写 了 两 次 。 


实例 3-2】 新 方法 一 一 使 用 CSS 编辑 文本 。 


实例 3-2: 使 用 CSS 编辑 文本 
源码 路 径 : 光盘 '\ 源 文件 03\3-2.html 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 使 用 新 方法 </title> < 上 -页 面 的 标题 -> 
<style type="text/css"> 
区 这 
.Style1{ 
font-size: xx-large; // 设 置 字体 大 小 
font-style: italic; // 设 置 字体 样式 
font-weight: bold; // 设 置 字体 粗细 


} 


o> 
</style> 
</head> 
<! -以 上 是 定义 页 面 的 头 部 ， 用 来 定义 修饰 页 面 的 样式 表 ， 以 下 是 页 面 的 结构 ， 使 用 样式 表 来 
布局 页 面 -> 
<body> 
<p class="style1"> 大 家 好 ，html 语言 并 不 难 </p> ”<!-body 中 的 p 对 象 引用 
了 .style1 样式 表 --> 
<p class="style1"> 努 力 一 定 能 学 得 很 好 </p> <!-body 中 的 p 对 象 引 用 
了 .style1 样式 表 --> 
</body> 
</html> 


style 们 是 引用 CSS 样 式 表 的 一 种 特定 格式 ，font-size、font-style 和 font-weight 分 别 定义 了 文本 字 
体 大 小 、 样 式 和 粗 体 。class 语 和 句 是 对 stylel 样 式 的 调用 。 
运行 程序 】 实 例 3-1 和 实例 3-2 在 浏览 器 中 的 效果 都 如 图 3.1 所 示 。 

[< 6 CE EL 


ET 


大 家 好 ，html 语 言 并 不 难 


努力 一 定 能 学 得 很 好 


图 3.1 新 旧 方 法 在 浏览 器 中 的 效果 
实例 3-1 和 实例 3-2 在 浏览 器 中 的 效果 是 一 样 的 。 


深入 学 习 】 在 旧 方 法 中 ,对 “大 家 好 ，html 语言 并 不 难 ” 编 辑 时 ,使 用 了 <h2>、<em> 和 <strong> 


全 
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标签 。 对 “努力 一 定 能 学 得 很 好 ”这 人 句 编辑 时 , 为 了 实现 同上 一 句 同 样 的 效果 , 再 次 使 用 了 <h2>、<em> 
和 <strong> 标 签 。 实 例 3-1 中 重复 编写 了 两 次 同样 的 标签 ， 编 写 者 不 得 不 重复 相同 的 工作 ， 使 得 工作 效 
率 降 低 。 而 使 用 CSS 时 ， 调 用 了 语句 class="stylel"， 文 本 就 发 生 了 惊人 的 改变 。 

正 是 CSS 的 出 现 ， 解 决 了 烦琐 的 重复 编写 的 问题 ， 彻 底 将 页 面 的 表现 和 页 面 的 结构 两 者 划分 开 。 
虽然 这 样 增加 了 前 端 页 面 开 发 的 难度 ， 但 是 却 提高 了 效率 。 不仅 如 此 ，CSS 还 能 实现 更 多 优秀 的 效果 ， 
这 将 在 后 面 详细 介绍 。 


3.2 文本 的 排版 格式 


HTML 文档 中 使 用 不 同 的 标签 来 设计 文本 的 排版 ， 试 想 在 阅读 一 份 报纸 时 ， 人 们 可 以 忍受 这 份 报 
纸 字体 大 小 不 一 ,标题 位 置 混乱 ， 排 版 更 是 无 比 糟糕 的 效果 吗 ? 例如 ， 图 3.2 中 这 样 的 排版 ， 甚 至 找 不 
到 它 的 标题 在 哪里 。 
巴黎 
只 需 一 件 鲜艳 单 品 就 能 让 冬季 造型 远离 沉闷 ， 它 
可 以 是 一 条 牛仔 裤 、 一 顶 贝 雷 帽 ， 也 可 以 是 一 头 
火焰 般 的 长 发 
考区 
款式 痉 典 甚至 老式 的 针织 祖坟 
让 落 抬 你 一 个 浊 星 又 时 芭 的 科 
季 ， 复 古 还 是 前 卫 则 取决 于 下 
半身 穿 什么 


3.2 ”糟糕 的 版 式 


好 的 文本 排版 需要 注意 一 些 重 要 的 细节 ， 如 字体 大 小 、 行 距 、 段 落 间 距 和 每 行 字数 等 问题 。 本 章 
会 在 后 面 的 小 节 中 穿插 介绍 这 些 排版 细节 ， 工 整 清洁 的 文本 排版 才 会 令 读者 感到 舒适 。 


3.2.1 写 一 行 换 一 行 


健 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 3 章 \ 写 一 行 换 一 行 .wmv 

一 般 页 面 文本 每 行 的 字数 在 35 字 左 右 ， 并 没有 一 定 的 规定 ， 原 则 是 只 要 每 行 控制 在 恰当 的 长 度 内 
就 可 以 。 太 短 了 浏览 者 需要 频繁 阅读 下 一 行 ， 太 长 了 又 需要 左右 移动 视线 ， 这 样 在 阅读 页 面 文本 时 感 
到 不 舒服 。 在 HTML 文档 中 ， 可 以 使 用 <p> 标 签 或 者 <br> 标 签 方式 使 文本 换行 。 其 写法 是 : 

<p>...</p> 

<br> 

<p> 标 签 并 不 是 真正 意义 上 的 换行 ,只 是 在 <p>...</p> 标 签 内 的 文本 是 一 个 段落 ， 这样 <p> 标 签 中 的 
内 容 和 它 后 面 的 内 容 看 上 去 就 像 换 行 了 一 样 ， 如 实例 3-3 所 示 为 <p> 标 签 在 HTML 中 的 使 用 方法 。 

【实例 3-3】 本 例 介 绍 <p> 标 签 的 使 用 。 在 <body> 中 使 用 <p> 标 签 对 文本 进行 分 段 换行 。 


攻 实例 3.3: 在 <body> 中 使 用 <p> 标 签 来 对 文本 进行 分 段 换行 
源码 路 径 : 光盘 '\ 源 文件 ,03\3-3.html 
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<html> 
<head> 
<title> 如 何 使 文本 换行 </title> 
</head> 
< 
MSN Space 对 HTML 语言 具有 相当 强大 的 支持 能 力 。<p> 虽 然 处 理 日 志 时 ，MSN 
Space 只 提供 给 大 家 简单 的 几 个 文字 处 理 功能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 作 预 
先 处 理 ，</p> 那 么 通过 简单 的 复制 粘贴 后 , 便 能 让 你 的 日 志 看 上 去 更 生动 活 泌 
</body> 
</html> 


<br> 标 签 是 真正 意义 上 的 换行 ， 它 是 单 标签 ， 即 没有 结束 标签 。 使 用 一 个 <br> 就 换行 一 次 ， 要 想 
使 用 多 次 换行 可 以 使 用 多 个 <br>。 两 个 <br> 标 签 生成 的 换行 标签 和 <p> 段 落 标签 的 浏览 效果 是 一 样 的 。 
区 别 在 于 <br> 标 签 可 以 同时 加 入 几 个 ， 而 <p> 标 签 不 行 。<br> 标 签 在 HIML 中 的 使 用 方法 如 实例 3-4 
所 示 。 

【实例 3-4】 使 用 <br> 标 签 ， 其 源码 如 下 所 示 。 
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re 实例 3-4: 使 用 <br> 标 签 换行 
源码 路 径 : 光盘 \ 源 文件 \03\3-4.html 


<head> 
<title> 如 何 使 文本 换行 </title> 
</head> 
<body> 
MSN Space 对 HTML 语言 具有 相当 强大 的 支持 能 力 。<br> 虽 然 处 理 日 志 时 ，MSN 
Space 只 提供 给 大 家 简单 的 几 个 文字 处 理 功能 ， 但 如 果 你 事先 在 网 页 编辑 器 中 对 文字 图 片 作 预 
先 处 理 ，<br> 那 么 通过 简单 的 复制 粘贴 后 , 便 能 让 你 的 日 志 看 上 去 更 生动 活 泌 
</body> 
</html> 


【运行 程序 】 浏 览 这 两 个 页 面 ， 实 例 3-3 和 实例 3-4 在 浏览 器 中 的 效果 如 图 3.3 和 图 3.4 所 示 。 
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图 3.3 使 用 <p> 标 签 图 3.4 使 用 <br> 标 签 
注意 : 使 用 <p> 标 签 , 文本 段落 之 间 的 行距 是 单 倍 行距 ,而 使 用 <br> 标 签 时 , 文本 换行 行距 是 0 倍 行距 。 


3.2.2 在 页 面 文本 中 空格 
句 4 知识 点 讲解 : 光盘 \ 视 频 讲解 第 3 章 \ 在 页 面 文本 中 空格 -wmv 


@ 
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在 正规 格式 的 文本 中 每 一 个 段落 的 开头 会 空 两 格 ， 而 在 HTML 源 文档 中 ， 连 续 输入 的 空格 键 会 被 
默认 为 一 个 空格 ， 所 以 ， 这 时 就 需要 使 用 特殊 的 空格 符号 。 空 格 符号 的 写法 是 : 


&nbsp; 


使 用 时 在 文本 需要 输入 空格 的 地 方 输入 “&nbsp;” 就 可 以 了 ， 如 实例 3-5 所 示 ， 在 同一 句 文 本 中 
分 别 放 入 不 同 长 度 的 空格 数 ， 以 此 来 观察 中 间 的 区 别 。 
【实例 3-5】 在 页 面 中 使 用 空格 符号 ， 其 源码 如 下 所 示 。 


re 实例 3-5: 在 页 面 中 使 用 空格 符号 
源码 路 径 : 光盘 \ 源 文件 ,03\3-5.html 


<head> 
<title> 使 用 空格 符号 </title> 

</head> 
<body> 

<p><font size="+3"> 空 格 123 符号 </font></p> 

<p><font size="+3"> 空 格 ”符号 </p> 

<p><font size="+3"> 空 格 &nbsp;&nbsp;&nbsp; 符 号 </p> 
</body> 

10 ”</html> 
说 明 : 第 7 行 代 码 “ 空 格 ”符号 ”中 ,输入 了 3 次 空格 ， 第 8 行 代码 “空格 &nbsp;&nbsp;&nbsp; 符 号 ” 


中 , 输入 了 3 次 “&nbsp;”。 
【运行 程序 】 在 浏览 器 中 查看 的 效果 如 图 3.5 所 示 。 
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空格 符号 
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图 3.5 使 用 空格 符号 
说 明 : 第 2 行 的 “空格 符号 ”中 并 没有 体现 出 3 个 空格 ， 实 际 上 只 是 1 个 空格 的 间距 。 
【深入 学 习 】 空 格 符号 属于 HTML 中 的 一 种 特殊 符号 ， 如 果 设计 者 不 想 使 用 “&nbsp:” 这 种 特殊 
符号 ， 同 时 又 希望 保留 连续 的 空格 符 ， 可 以 使 用 一 个 特殊 用 途 的 标签 <pre>。 该 标签 的 写法 是 : 
<pre>...</pre> 


<pre> 标 签 可 定义 预 格式 化 的 文本 ， 用 来 保留 文本 中 的 空格 和 换行 。 就 算 在 代码 中 不 使 用 空格 和 换 
行 的 标签 ， 而 是 手动 对 其 进行 空格 和 换行 ， 浏 览 器 显示 出 来 的 效果 也 和 代码 中 的 效果 相同 。 如 实例 3-6 
所 示 就 是 使 用 <pre> 标 签 来 实现 的 页 面 文本 排版 。 

【实例 3-6】 本 实例 使 用 <pre> 标 签 来 对 一 段 文本 进行 预 格式 化 。 


® 


<head> 
<title> 使 用 <pre> 标 签 </title> 
</head> 


<pre> 
君 不 见 黄河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 


1 
加 
3 
4 
5 <body> 
6 
党 
8 


9 君 不 见 高 堂 明镜 翡 白 发 ， 朝 如 青丝 暮 成 雪 。 
10 

11 人 生得 意 须 尽 欢 ， 莫 使 金 樟 空 对 月 。 
12 

13 天 生 我 材 必 有 用 ， 千 金 散 尽 还 复 来 。 
14 </pre> 

15 </body> 

16 </html> 


注意 : 页 面 中 的 文本 不 会 随 着 浏览 器 窗口 的 大 小 自动 换行 。 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.6 所 示 。 
【深入 学 习 】 如 果 删 除 实例 3-6 中 的 <pre> 标 签 ， 即 第 6 行 、 第 14 行 中 的 代码 ， 最 后 在 浏览 器 中 显 
示 的 效果 如 图 3.7 所 示 。 
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己 不 风 黄 河 之 水 天 上 来 ， 天 演 到 下 不 丰 国 * 于 六 
团 不 见 启 滞 明 筑 翡 白 友 ， 朝 如 殖 兰 暮 记 登 。 
人 生得 四 策 尽 欢 ， 其 甘 全 福 空 对 月 < 
天 生 我 村 勾 有 月， 千金 铅 尽 反复 未 。 


于 和 和 入 所 台 . a 


图 3.6 使 用 <pre> 标 签 效果 图 3.7 没有 使 用 <pre> 标 签 效果 


通过 对 比 图 3.6 和 图 3.7, 发 现在 没有 <pre> 标 签 的 文本 中 ,代码 不 识别 连续 的 空格 符号 ,也 不 能 识 
别 文本 的 换行 。 如 果 设计 者 是 用 记事 本 来 编写 代码 ， 使 用 <pre> 会 方便 一 些 ， 但 是 在 大 部 分 可 视 化 页 面 
文档 编辑 的 软件 中 ， 如 Dreamweaver， 使 用 这 类 软件 编写 时 则 很 少 出 现 <pre> 标 签 。 设 计 者 可 以 根据 自 
己 的 习惯 ， 结 合 不 同 的 方法 来 选择 是 否 要 使 用 <pre> 标 签 。 


注意 : 尽量 不 要 大 量 地 使 用 <pre> 标 签 ， 因 为 这 样 会 给 日 后 修改 代码 带 来 不 必要 的 麻烦 。 
3.2.3 ”文本 的 段落 要 对 齐 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 3 章 \ 文 本 的 段落 要 对 齐 .wmv 
编排 版 面 时 ， 时 常 需 要 使 一 系列 的 文本 段落 按照 统一 格式 对 齐 ， 如 左 对 齐 、 右 对 齐 和 居中 对 齐 。 


@ 


和 3 二 动手 在 网 页 中 写 此 fa 


实际 操作 时 ， 设 计 者 当然 不 是 使 用 大 量 空格 符号 来 一 格 一 格 地 编排 文本 位 置 。 在 HTML 文档 中 ， 文 本 
的 对 齐 是 通过 align 属性 实现 的 ， 通 常 把 align 放 在 <p> 等 标签 内 使 用 ， 如 下 所 示 : 


<p align=left>...</p> 
<p align=center>...</p> 
<p align=right>...</p> 


< 一 左 对 齐 -> 
<!-- 居 中 对 齐 -> 
<4-- 右 对 齐 -> 


align 属性 有 3 个 属性 值 : left、center 和 right， 分 别 表示 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
【实例 3-7】 本 实例 在 HTML 中 使 用 对 齐 属性 ， 将 不 同文 本 采用 不 同 的 对 齐 方式 ， 放 置 在 页 面 中 。 


源码 路 径 : 光盘 \ 源 文件 ,03\3-7.html 


区 ; | 实例 3.7: 在 HTML 中 使 用 对 齐 属性 


</head> 


<body> 
<p> 文 本 左 对 齐 


comoDm 上 whN 一 


芝 
= 


说 明 : 默认 情况 下 ， 可 以 省 略 </p>。 


head> 
<title> 如 何 使 文本 对 齐 </title> 


<p align=left> 文 本 左 对 齐 
<p align=center> 文 本 居中 对 齐 
<p align=right> 文 本 右 对 齐 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.8 所 示 。 


日 | JIN 者 光 和 可 理 \ 清 必 \ 人 ”| 局 如 何 使 文 < 对 开 


文本 居中 对 齐 


3.8 使 用 段落 对 齐 的 效果 


【深入 学 习 】 实 际 上 ，<p> 标 签 在 默认 情况 下 相当 于 <p align=left>， 所 以 在 浏览 器 中 查看 的 效果 如 
图 3.8 所 示 ， 默 认 情 况 下 的 文本 是 和 窗口 的 左边 对 齐 。 
如 果 在 编辑 文本 时 ， 对 于 所 有 的 文本 都 要 求 按 同一 种 方式 对 齐 ， 那 么 在 使 用 的 过 程 中 可 以 对 文本 
进行 全 局 定义 ， 不 需要 对 每 段 文 本 添加 属性 命令 。 如 代码 第 7 一 9 行 中 是 不 需要 对 <p> 标 签 内 的 每 一 段 
文本 分 别 定义 ， 而 是 可 以 直接 将 align 属性 放 在 <body> 中 使 用 ， 如 实例 3-8 所 示 为 对 整体 属性 定义 和 对 


局 部 属性 定义 同时 存在 的 效果 。 


【实例 3-8】 本 实例 对 整体 和 局 部 文本 同时 使 用 了 对 齐 属性 。 


源码 路 径 : 光盘 '\ 源 文件 ,03\3-8.html 


re | 实例 3-8: 对 整体 和 局 部 文本 同时 使 用 对 齐 属性 
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<html> 
<head> 
<title> 标 签 中 对 齐 属 性 的 应 用 </title> 
</head> 
<body align=center> <!- 使 用 居中 对 齐 --> 
<h3> 蜀 相 </h3> 
<p align=right> ( 唐 ) 杜甫 < 上 -使 用 右 对 齐 --> 
<p> 丞 相 祠 堂 何 处 导 ， 锦 官 城 外 柏 森森 。 
<p> 映 阶 怕 草 自 春色 ， 隔 叶 黄 醴 空 好 音 。 
10 <p> 三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。 
11 <p> 出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。 


comoDm 上 whN 一 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.9 所 示 。 
[a Ee 


(© De FSHTML+CSS+h D ~ CB 5 < | 


ES 


蜀 相 


amd | 
丞相 祠 室 何 处 寻 ， 锦 人 官 城 外 柏 森 森 。 
映 阶 碧 草 自 春 色 ， 隔 叶 甘 砚 袍 好 音 。 
[| 


三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 . 
出 师 未 捷 身 先 死 ， 长 使 英 雁 泪 满 洽 - 


图 3.9 对 整体 和 局 部 文本 使 用 对 齐 命令 的 效果 


【深入 学 习 】 实 例 中 第 5 行 中 把 所 有 <body> 标 签 中 的 文本 定义 为 居中 对 齐 〈 使 用 CSS 样式 ， 将 在 
后 面 的 章节 中 讲解 ) ， 这 样 就 不 需要 依次 对 每 一 个 <p> 标 签 中 的 文本 进行 定义 。 同 时 在 全 局 定义 下 ， 代 
码 中 还 有 对 局 部 的 定义 。 如 代码 第 7 行 中 ， 文 本 被 定义 为 右 对 齐 。 那 么 代码 第 7 行 中 的 文本 最 后 是 居 
中 对 齐 还 是 右 对 齐 呢 ?如 图 3.9 所 示 为 浏览 器 中 的 效果 。 

代码 第 7 行 中 的 文本 在 浏览 器 中 是 居 右 对 齐 的 ， 所 以 HTML 语言 中 有 这 样 的 特性 ， 当 出 现 两 个 或 
者 两 个 以 上 同属 性 作用 的 标签 对 同一 个 对 象 作 用 时 ， 那 么 这 个 对 象 就 依照 就 近 原 则 ， 对 离 它 最 近 的 那 
个 标签 属性 起 作用 。 例 如 ， 在 实例 3-8 中 ，<body> 中 添加 了 居中 对 齐 的 属性 命令 ， 本 来 应 该 使 所 有 文 
本 都 居中 对 齐 ， 但 是 代码 第 7 行 的 <p> 中 添加 了 右 对 齐 的 属性 命令 ， 它 也 对 第 7 行 的 文本 起 作用 。 这 种 
情况 下 ， 则 按照 就 近 原 则 ， 使 文本 以 右 对 齐 的 形式 表现 出 来 。 


3.3 文本 的 属性 样式 


在 HIML 页 面 中 , 可 以 通过 使 用 不 同 的 标签 来 修改 文本 的 属性 , 使 页 面 内 容 呈 现 不 同 的 显示 效果 。 
本 节 将 学 习 如 何 使 文本 效果 更 丰富 ， 更 好 地 展示 页 面 内 容 。 


@ 


第 3 章 动手 在 网 页 中 写 些 


3.3.1 不 一 样 的 文本 字体 大 小 


久 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 不 一 样 的 文本 字体 大 小 -wmv 
早期 的 HTML 语言 中 ， 有 很 多 不 同 的 标签 来 实现 粗 体 、 斜 体 以 及 一 些 特殊 的 文字 字体 。 虽 然 大 部 分 现 
在 已 经 很 少 使 用 ， 但 是 一 些 特殊 的 标签 ， 例 如 ， 粗 体 、 斜 体 等 ， 对 于 理解 、 学 习 HTML 语言 有 很 好 的 帮 
助 。 下 面 是 本 节 的 知识 点 ,把 需要 编辑 的 文本 放 入 相应 的 标签 内 来 改变 文字 效果 。 例如， 使 用 <em> 标 签 。 
<body> 
<p> 
<em> 文 本 内 容 </em> 
</body> 
说 明 : 当 CSS 出 现 后 ， 许 多 标签 渐渐 被 淘汰 ， 但 并 非 所 有 标签 都 被 淘汰 了 ， 一 些 常用 的 编辑 文本 的 标 
签 如 表 3.1 所 示 。 


表 3.1 改变 字体 样式 的 标签 


标 签 
<h?>...</h?> 
<strong>...</strong> 


说 明 
“?” 代 表 1 一 6， 依 此 改变 字体 从 小 到 大 
强调 文本 内 容 ， 通 常 是 粗 体 


<em>...</em> 强调 文本 内 容 ， 通 常 是 斜体 
<b>...</b> 粗 体 字 

<i>...</> 斜体 字 

<>...<h> 加 下 划 线 

<Var>...</Var> 变数 ， 通 常 是 斜体 字 


<cite>...</cite> 


引文 ， 通 常 是 斜体 字 


<dfn>...</dfn> 定义 ， 通 常 是 斜体 字 ， 并 不 是 所 有 浏览 器 都 支持 
<address>...</address> 地 址 ， 通 常 是 斜体 字 
<tb...<t> 打字 机 等 宽 字体 
<samp>...</samp> 样本 
<code>...</code> 显示 原始 码 使 用 
<kbd>...</kbd> 键盘 输入 
<strike>...</strike> 加 删除 线 
<big>...</big> 稍 大 字体 
<small>...</small> 稍 小 字体 
<sup>...</sup> 数学 标记 中 的 上 标记 
<sub>...</sub> 数学 标记 中 的 下 标记 


对 照 表 3.1 的 标签 排列 ， 如 实例 3-9 所 示 在 浏览 器 中 改变 字体 样式 的 标签 ， 最 终 得 到 的 效果 如 
图 3.10 所 示 。 
【实例 3-9】 本 实例 中 对 文本 使 用 了 不 同 的 改变 字体 样式 的 标签 。 


实例 3-9: 对 文本 使 用 不 同 的 改变 字体 样式 的 标签 
源码 路 径 : 光盘 \ 源 文件 \03\3-9.html 


MCAHCSS 网 页 设计 详解 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.10 所 示 。 


<html> 
<head> 


<title> 改 变 字体 样式 的 标签 </title> 


</head> 
<body> 


<br><h1>h1 标签 内 文本 样式 </h1> 
<br><strong>strong 标签 内 文本 样式 </strong> 
<br><em>em 标签 内 文本 样式 </em> 
<br><b>b 标签 内 文本 样式 </b> 
<br><i>i 标签 内 文本 样式 </i> 
<br><u>u 标签 内 文本 样式 </u> 
<br><var>var 标签 内 文本 样式 </var> 
<br><cite>cite 标签 内 文本 样式 </cite> 
<br><dfn>dfn 标签 内 文本 样式 </dfn> 
<br><address>address 标签 内 文本 样式 </address> 
<br><tt>tt 标签 内 文本 样式 </tt> 
<br><samp>samp 标签 内 文本 样式 </samp> 
<br><code>code 标签 内 文本 样式 </code> 
<br><kbd>kbd 标签 内 文本 样式 </kbd> 
<br><strike>strike 标签 内 文本 样式 </strike> 
<br><big>big 标签 内 文本 样式 </big> 
<br><small>small 标签 内 文本 样式 </small> 
<br> 数 字 标 签 <sup>sup</sup> 
<br> 数 字 标 签 <sub>sub</sub> 


[= 5 
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峡 式 
EC 


EC 


图 3.10 常用 文本 标签 在 浏览 器 中 的 查看 效果 


注意 : <strong> 和 <b> 虽 然 显 示 的 结果 相同 ， 但 是 前 者 属于 逻辑 标记 ,后 者 属于 实体 标记 


他- 


。 还 辑 标记 在 


第 3 章 动手 在 网 页 中 SET 


有 些 浏 览 器 中 不 一 定 能 准确 显示 ， 而 实体 标记 则 显示 固定 的 效果 。 上 述 标签 中 ， 属 于 逻辑 标记 
的 有 <strong>、<em>、<var>、<ctie>、<dfn>、<address> 、<code>、<kbd> 、<samp> 和 <tt> 标 签 ， 
属于 实体 标记 的 有 <i>、<b> 和 <u> 标 签 。 


3.3.2 ”奇妙 的 特殊 符号 


印 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 奇 妙 的 特殊 符号 -wmv 

在 3.2.2 节 中 介绍 了 “&nbsp;” 空 格 符号 。 事 实 上 ， 在 HTML 语言 中 ， 类 似 空格 符号 这 样 的 标记 
有 很 多 。 一 般 情况 下 ， 它 们 不 经 常 使 用 ， 所 以 大 部 分 并 不 常见 ， 但 是 在 某 些 时 候 ， 设 计 者 不 得 不 使 用 
这 些 特殊 符号 ， 所 以 还 是 应 该 了 解 这 些 特殊 符号 。 

特殊 符号 通常 有 其 固定 的 格式 ， 基 本 格式 为 “&...;”。 例 如 ， 两 个 重要 的 很 有 意思 的 特殊 符号 ， 
分 别 是 注册 商标 “&reg;” 和 版 权 商 标 “&copy;”。 如 实例 3-10 所 示 ， 将 这 两 个 特殊 符号 放 在 了 页 面 中 。 

【实例 3-10】 本 实例 介绍 了 两 个 特殊 符号 一 一 注册 商标 “&reg;” 和 版 权 商 标 “&copy;” 在 页 面 
中 的 使 用 。 


"eC 实例 3-10: 注册 商标 “&reg:” 和 版 权 商标 “&copy:” 在 页 面 中 的 使 用 
源码 路 径 : 光盘 \ 源 文件 ,03\3-10.html 


作 
2 <head> 

3 <title> 注 册 商 标 和 版 权 商 标 </title> 

4 </head> 

3 <body style="text-align:center"> 

6 <p> 注 册 商标 &reg; <!-- 注 册 商 标 --> 
区 <p> 版 权 &copy; <!-- 版 权 商 标 --> 
8 </body> 

9 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.11 所 示 。 
注册 商标 


版 权 e 


图 3.11 注册 商标 和 版 权 商 标 
说 明 : 表 3.2 中 给 出 了 一 些 常用 的 特殊 符号 ， 有 兴趣 的 读者 不 妨 自 己 动手 编写 一 下 ， 看 看 它们 的 效果 。 
表 3.2 常用 的 特殊 符号 
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续 表 
字符 代 码 
节 号 Rsect: 
度数 符号 Cedeg: 
加 减 号 &plusmn: 
上 标 2 &sup2: 
上 标 3 &sup3 
乘 号 &times 
除 号 &divide: 
AE 组合 &AFlig 
Ae 组 合 &caclig: 
革 务 之 一 &frac12: 
四 分 之 一 &fracl4: 
居中 的 点 &middot: 


3.3.3 ”给 文本 加 标注 


颁 H 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 给 文本 加 标注 .wmv 

在 书本 中 ， 如 果 需 要 给 一 段 文 章 中 的 某 一 个 名 词 标 加 注释 ， 只 能 在 那 段 文 字 右上 角 添 加 编 注 ， 然 
后 在 页 脚 的 位 置 给 出 解释 。 而 网 页 的 一 个 优势 是 设计 者 可 以 使 用 很 多 奇特 的 标签 ， 实 现 一 些 书本 中 无 
法 实现 的 效果 。 如 在 网 页 中 ， 如 果 设 计 者 希望 对 某 一 个 名 词 ， 或 者 某 一 段 文字 添加 注释 ， 可 以 用 
<acronym> 标 签 ， 使 用 形式 如 下 : 


<acronym title="...">...</acronym> 


注释 的 内 容 放 在 title 属性 后 的 引号 中 ， 被 注释 的 内 容 放 在 标签 内 。 如 实例 3-11 中 给 一 段 文本 添加 
了 标注 ， 以 此 来 向 浏览 者 做 更 详细 的 介绍 。 
【实例 3-11】 本 实例 介绍 了 使 用 <acronym> 添 加 标注 的 方法 ， 给 一 段 文本 添加 了 标注 。 


区 实例 3-11: 使 用 <acronym> 给 一 段 文本 添加 标注 
源码 路 径 : 光盘 \ 源 文件 ,03\3-11.html 


<head> 
<title> 用 <acronym> 标 签 添加 标注 </title> 
</head> 
<body> 
自 1851 年 英国 伦敦 举办 第 一 届 展 览 会 以 来 ， 
<acronym title=" 世 博 会 全 称 为 世界 博览 会 ， 世 界 博 览 会 是 由 一 个 国家 的 政府 主办 "> 
“世博 会 ”</acronym> <!-- 对 “世博 会 ”进行 标注 --> 
因 其 发 展 迅速 而 享有 “经 济 、 科 技 、 文 化 领域 内 的 奥林匹克 盛会 ”的 美誉 。 按 照 国际 展 … 
10 </body> 
11 </html> 
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【运行 程序 】 在 浏览 器 中 显示 的 效果 如 图 3.12 所 示 。 


@ 


当 鼠 标 光 标 移动 到 有 注释 的 文字 上 时 ， 
网 页 会 自动 弹出 注释 内 的 内 容 


图 3.12 ”使 用 <acronym> 给 文本 添加 注释 
注意 : 在 页 面 中 添加 注释 时 ,把 被 注释 的 对 象 放 在 <acronym> 标 签 内 ,如 代码 中 的 “世博 会 ”这 个 名 词 ， 
而 对 它 解 释 的 内 容 则 放 在 <acronym> 内 title 属 性 的 后 面 。 


3.4 整齐 的 文本 列表 


就 像 一 本 书 一 定 要 有 目录 一 样 ， 网 页 上 的 信息 时 常 也 需要 用 列表 的 形式 表现 出 来 ， 如 一 些 目录 列 
表 、 菜 单 介绍 、 计 划 类 条 目 、 罗 列 并 列 关系 的 段落 ， 以 此 来 帮助 浏览 者 更 便捷 地 获取 信息 ， 这 就 是 文 
本 列表 。 页 面 中 文本 列表 可 以 分 为 无 序列 表 、 定 义 列表 和 有 序列 表 。 合 理 使 用 列表 ， 不 仅 能 传达 页 面 
的 信息 ， 还 能 起 到 美化 网 页 的 作用 。 


3.4.1 无 序列 表 


分 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 3 章 \ 无 序列 表 .wmv 
无 序列 表 是 相对 于 有 序列 表 而 言 的 ， 是 指 列表 项 在 进行 排序 时 ， 在 列表 项 前 不 添加 列表 序号 ， 而 
是 以 其 他 图 案 来 进行 标记 的 一 种 列表 。 无 序列 表 常 见于 项 目 说 明 ， 是 一 种 并 列 关系 的 列表 。 如 果 结合 
CSS 的 修饰 作用 ， 还 可 以 表现 为 导航 栏 ， 在 页 面 中 的 作用 可 以 说 是 相当 重要 。 无 序列 表 以 <ul> 标 签 开 
始 ，</ul> 标 签 结束 。 在 <ul> 标 签 中 ， 还 需要 使 用 <li> 标 签 来 定义 列表 的 列表 项 ， 具 体 的 写法 如 下 所 示 : 
<ul> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
</ul> 


使 用 这 样 的 列表 可 以 做 一 些 有 趣 的 简介 类 条 目 ， 如 实例 3-12 就 表现 了 这 样 一 个 信息 登录 的 页 面 。 
【实例 3-12】 本 实例 介绍 制作 无 序列 表 的 方法 ， 并 制作 了 一 个 信息 登录 页 面 。 


re 实例 3-12: 使 用 无 序列 表 制 作 一 个 信息 登录 页 面 
源码 路 径 : 光盘 \ 源 文件 ,03\3-12.html 


| 

之 <head> 

3 <title> 制 作 无 序列 表 </title> 

4 </head> 

5 <body style="text-align:center"> 

6 <h3> 个 人 简介 </h3> 

区 <ul> < 上 -添加 列表 --> 
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8 <li> 姓 名 : </lli> < 上 -添加 列表 项 -> 
9 <li> 年 龄 : <lli> 

10 <li> 性 别 : </li> 

Ek | <li> 爱 好 : </li> 

2 </ul> 

13 -</body> 

14 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.13 所 示 。 


图 3.13 无 序列 表 


【深入 学 习 】 代 码 中 <ul> 标 签 内 的 部 分 ， 即 第 7 一 12 行 是 一 个 简单 的 列表 ， 其 中 罗列 了 4 个 条 目 ， 
分 别 是 姓名 、 年 龄 、 性 别 和 爱好 。 如 图 3.13 所 示 是 登录 信息 的 页 面 在 浏览 器 中 显示 的 结果 。 


注意 : 在 默认 情况 下 ， 无 序列 表 的 项 目 符号 是 实心 的 黑色 小 圆圈 。 
3.4.2 ”有 序列 表 


全 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 有 序列 表 .wmv 
有 序列 表 是 指 列表 项 在 进行 排序 时 ， 使 用 编号 进行 排序 ， 而 不 是 使 用 图 像 排序 。 有 序列 表 中 的 列 
表 项 前 都 用 数字 或 者 字母 来 表示 顺序 。 如 1、2、3 或 者 a、b、c 等 。 有 序列 表 使 用 <ol> 标 签 ， 以 <ol> 
开始 ， 到 </ol> 结 束 。 有 序列 表 中 同样 使 用 <li> 标 签 来 定义 列表 的 列表 项 ， 有 具体 的 写法 如 下 : 
<ol> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
</ol> 


只 要 在 实例 3-12 中 做 一 些小 小 的 改动 , 将 代码 第 7 行 和 第 12 行 的 <ul> 标 签 蔡 换 成 <ol> 标 签 ， 原先 
的 无 序列 表 就 变 成 为 有 序列 表 的 样式 了 , 如 图 3.14 所 示 就 是 有 序列 表 的 样式 , 每 个 条 目 依次 排列 数字 。 


图 3.14 有 序列 表 
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3.4.3 ”定义 列表 


区 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 3 章 \ 定 义 列表 .wmv 

定义 列表 是 一 种 缩 进 样式 的 列表 ， 设 计 的 本 意 是 要 用 于 定义 术语 (名 词 解释 )。 代 码 中 使 用 <dl> 
来 创建 定义 列表 。 在 列表 中 使 用 <dt> 来 定义 页 面 中 的 每 一 行 。 与 有 序列 表 和 无 序列 表 不 同 的 是 ， 在 定 
义 列 表 时 ， 列 表 中 会 自动 添加 缩 进行 来 展示 这 个 列表 的 条 目 ， 使 用 <dd> 标 签 来 定义 缩 进行 。 具 体 的 写 
法 如 下 : 


<dl> 
<dt>...</dt> 
<dd>...</dd> 
<dt>...</dt> 
<dd>...</dd> 
</dl> 


现在 举 一 个 使 用 定义 列表 的 简单 的 例子 ， 如 实例 3-13 所 示 为 使 用 定义 列表 来 表现 一 段 名 词 解释 
的 页 面 。 
【实例 3-13】 本 实例 讲解 制作 定义 列表 的 方法 。 


re 实例 3-13: 制作 定义 列表 
源码 路 径 : 光盘 \ 源 文件 \03\3-13.html 


1 

2 <head> 

3 <title> 制 作 定 义 列表 </title> 

4 </head> 

5 <body> 

6 <h3> 镜 头 画面 的 剪辑 </h3> 

渡 <dl> <!-- 定 义 列表 --> 

8 <dt> 分 剪 </dt> <!- 定 义 列表 条 目 --> 

9 <dd> 一 个 镜头 分 成 两 个 镜头 或 者 两 个 以 上 的 镜头 使 用 。</dd> <!-- 条 目 解释 --> 
10 <dt> 挖 剪 </dt> 


11 <dd> 将 一 个 完整 镜头 中 的 动作 、 人 和 物 运动 镜头 在 运动 中 的 某 一 部 位 上 的 多 
12 ” 余 的 部 分 控 剪 去 。</dd> 

13 <dt> 拼 剪 </dt> 

14 <dd> 将 一 个 镜头 重复 拼接 。</dd> 

15 </dl> 

16 </body> 

17 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 3.15 所 示 。 

【深入 学 习 】 在 定义 列表 中 ， 放 在 <dd> 标 签 中 的 文字 内 容 会 作为 缩 进行 显示 在 浏览 器 中 。 此 外 ， 
许多 页 面 设计 者 使 用 <dl> 和 <dd> 标 签 用 来 替代 <blockquote> 标 签 的 功能 ， 以 此 来 缩 进 文本 行 。 即 在 需要 
缩 进 的 文本 前 面 加 <dl> 和 <dd>， 在 文本 结束 的 地 方 加 上 </dl> 和 </dd>， 其 作用 和 <blockquote> 标 签 是 一 
样 的 ， 该 标签 使 内 容 缩 进而 不 将 其 视 为 定义 。 
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图 3.15 使 用 定义 列表 


3.4.4 ”列表 谋 套 


鳃 m 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 3 章 \ 列 表 谍 套 :wmv 

在 设计 页 面 使 用 列表 时 ， 经 常会 遇 到 将 一 个 列表 放 入 另 一 个 列表 中 的 情况 ， 这 种 情况 称 为 列表 嵌 
套 。 列 表 嵌 套 就 好 像 在 一 个 大 盒子 中 放 入 一 个 小 一 些 的 盒子 ， 在 较 小 一 些 的 盒子 中 再 放 入 一 个 小 盒子 ， 
列表 嵌 套 就 是 列表 里 面 还 有 列表 。 

无 论 是 无 序列 表 嵌 套 ， 还 是 有 序列 表 嵌 套 ， 或 者 是 无 序列 表 和 有 序列 表 的 混合 列表 嵌 套 ， 它 们 的 
代码 写法 都 遵从 HTML 代码 的 使 用 规则 ， 将 一 个 列表 的 标签 完全 放 入 另 一 个 标签 内 ， 这 是 一 种 父子 
级 的 关系 。 如 实例 3-14 使 用 了 列表 嵌 套 来 表现 书籍 的 目录 ， 这 种 方法 常用 来 表示 复杂 的 导航 ， 应 用 广 
绢 。 

【实例 3-14】 本 实例 使 用 列表 的 嵌 套 来 制作 一 个 书籍 的 目录 。 


加 | 实例 3-14: 使 用 列表 的 嵌 套 来 制作 一 个 书籍 的 目录 


源码 路 径 : 光盘 \ 源 文件 \03\3-14.html 


1 <html> 

他 <head> 

3 <title> 列 表 嵌 套 <jtitle> 

二 </head> 

5 <body> 

6 <h3> 四 大 名 著 </h3> 

区 <ul style="list-style-type:disc"> <!- 定 义 无 序 列表 的 项 目 符号 -> 

8 <li> 列 表 一 

9 <ul style="list-style-type:circle"> < 上 -在 无 序列 表 中 赃 套 一 个 无 序列 表 --> 

10 <li>《 三 国 演义 》 

11 <ul style="list-style-type:square"> <!- 在 第 二 层 嵌 套 的 无 序列 表 中 再 嵌 套 一 个 
12 ”无 序列 表 -> 

13 <li> 第 一 回 宴 桃 园 豪 杰 三 结义 斩 黄 巾 英雄 首 立 功 </li> 

14 <li> 第 二 回 ” 张 翼 德 怒 鞭 督 邮 何 国务 谋 诛 宦 竖 </li> 

15 <li> 第 三 回 议 温 明 董 卓 叱 丁 原 馈 金 珠 李 肃 说 吕布 <> 

16 </ul> 

</li> 

18 <li>《 水 浒 传 》 

19 <ol> <!- 在 第 二 层 嵌 套 的 无 序列 表 中 再 嵌 套 一 个 有 序列 表 --> 
20 <li> 第 一 回 ” 张 天 师 祈 祝 癌 疫 洪 太 尉 误 走 妖 魔 </li> 


第 3 章 动手 在 网 页 中 写 


21 <li> 第 二 回 王 教头 私 走 延 安 府 九 纹 龙 大 闹 史 家 村 </li> 

22 <li> 第 三 回 史 大 郎 夜 走 华 阴 县 鲁 提 辖 拳 打 镇 关 西 </li> 

23 </ol> 

24 </l> 

25 </ul> 

26 <ol style="list-style-type:upper-roman"> <!-- 在 无 序列 表 中 绊 套 一 个 有 序列 表 --> 
27 <li>《 西 游记 》 

28 <ul> < 上 -在 第 二 层 庶 套 的 有 序列 表 中 再 嵌 套 一 个 无 序列 表 --> 
29 <li> 第 一 回 灵 根 育 孕 源 流出 ”心性 修 持 大 道生 </li> 

30 <li> 第 二 回 ” 悟 彻 车 提 真 妙 理 。” 断 魔 归 本 合 元 神 </li> 

Bf <li> 第 三 回 四海 千 山 和 皆 拱 伏 ” 九 幽 十 类 尽 除名 </li> 

32 </ul> 

33 </l> 

34 <li>《 红 楼 梦 》 

35 <ol style="list-style-type:upper-alpha"> 。” <!- 在 第 二 层 谋 套 的 有 序列 表 中 再 嵌 套 
36 ”一 个 有 序列 表 --> 

37 <li> 第 一 回 ” 杜 士 隐 梦 幻 识 通 灵 页 雨 村 风尘 怀 畦 秀 </> 

38 <li> 第 二 回 ”页 夫人 仙 逝 扬州 城 冷 子 兴 演 说 荣 国府 </li> 

39 <li> 第 三 回 ” 托 内 兄 如 海 荐 西 宾 接 外 孙 贾 母 惜 孤 女 </li> 

40 </lol> 

41 </l> 

42 </ol> 

43 </ul> 

44 </body> 

45 </html> 


【运行 程序 】 记 人 
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[rwevmcss+h D ce| NI 由 | 
Ex a Ei 工具 ()。 颈 购 (0 | 
四 大 名 著 | 
S | 


寞 棋 区 春 杰 三 夸 义 斩 黄 巾 英雄 首 立功 
张 自 德 荡 粮 督 邮 何 国 英 谋 诛 官 竖 
议 温 明 重 车 比 丁 原 馈 售 珠 地 由 说 吕布 


加 

回 

回 

加 张 天 师 祈福 瘟疫 洪 太 剧 误 走 妖 厅 

回 王 教头 社 走 延安 府 九 纹 龙 大 阅 史 家 村 
四 史 大 妇 夜 走 华 阴 县 鲁 扣 辖 光 打 镇 关 琴 
回 灵 根 育 孚 入 流出 心性 修 持 大 道生 
回 悟 彻 著 提 真 阔 理 。 断 厦 归 本 台 元 神 
回 四 海 千 山 皆 拱 伏 九 易 十 类 尽 除 名 

加 EC 识 通 灵 页 十 村 风尘 怀 闵 秀 
昌 天 仙 通 白 放 


H 城 谷地 共 洒 说 某国 附 
和 投 外 孙 贾 母 惜 浙 女 


Fd 2 志 


3.16 ”列表 的 嵌 套 


【深入 学 习 】 该 页 面 中 包含 了 多 次 列表 的 嵌 套 ， 共 有 3 层 关 系 ， 最 外 层 的 是 一 级 列表 ， 虽 然 它 只 
有 一 个 列表 行 ， 即 条 目 “ 列 表 一 ”， 体 现在 程序 3.14 中 是 第 7~43 行 。 一 级 列表 的 条 目下 是 一 个 新 的 
无 序列 表 和 一 个 新 的 有 序列 表 ， 如 代码 中 第 9 一 25 行 是 无 序列 表 部 分 ， 第 26 一 42 行 是 有 序列 表 部 和 


它们 是 二 级 列表 。 
@ 
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在 无 序列 表 和 有 序列 表 下 ， 分 别 有 两 个 列表 条 目 ， 无 序列 表 下 有 条 目 《 三 国 演义 》 和 条 目 《 水 浒 
传 》， 有 序列 表 下 有 条 目 《 西 游记 》 和 《红楼 梦 》。 在 每 一 个 书 名 目录 下 ， 在 实例 中 用 列表 列举 了 章 
可 目录 ,这些 列 表 则 是 全 局 的 三 级 列表 。 代码 中 第 11 一 23 行 是 无 序列 表 下 嵌 套 的 列表 部 分 , 第 27 一 39 
行 是 有 序列 表 下 嵌 套 的 列表 部 分 。 
注意 : 在 列表 嵌 套 的 时 候 ， 不 同 级 的 列表 下 的 条 目 符号 都 是 不 同 的。 默认 情况 下 ， 无 序列 表 中 一 级 列 

表 是 黑色 实心 小 圆 ， 二 次 级 列表 是 空心 小 圆 ， 三 级 列表 是 黑色 实心 小 方块 。 有 序列 表 无 论 哪 一 
级 的 列表 ， 一般 都 是 以 阿拉 伯 数 字 为 条 目 符号 。 


如 果 设 计 者 改变 条 目 符号 的 样式 ， 可 以 通过 代码 定义 不 同 的 样式 ， 条 目 符号 可 以 通过 添加 
“style="list-style-type:.…."” 属 性 来 改变 。 如 代码 第 7、9、11、25 和 34 行 中 ，disc 是 黑色 实心 的 小 圆 
圈 ，circle 是 空心 的 圆圈 ，square 是 黑色 实心 的 小 方块 ， 它 们 属于 无 序列 表 。upper-roman 是 大 写 的 罗马 
数字 ，upper-alpha 是 英文 大 写字 母 ， 此 外 ， 属 性 lower-alpha 是 小 写字 母 ，lower-roman 是 小 写 的 罗马 数 
字 。 在 这 个 案例 中 ， 正 是 通过 这 样 的 方式 来 改变 列表 条 目 符号 的 样式 。 


3.$ 制作 一 则 通知 


颂 H 知 识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 制 作 一 则 通知 .wmv 

在 本 节 中 结合 前 面 所 学 的 知识 ， 通 过 制作 一 则 会 议 通 知 来 整体 理解 本 章 的 知识 点 。 首 先 ， 制 定好 
页 面 的 内 容 : 一 则 会 议 通知 需要 包括 通知 的 标题 、 通 知 的 内 容 ， 还 有 最 后 的 署名 。 既 然 分 为 3 个 部 分 
去 完成 ， 就 可 以 一 次 针对 每 一 块 需求 来 编写 页 面 代码 ， 最 后 再 将 它们 整合 在 一 起 ， 编 辑 格式 。 这 个 页 
面 的 HTML 文档 如 实例 3-15 所 示 。 

【实例 3-15】 本 实例 制作 一 则 会 议 通知 。 


re 实例 3-15: 制作 一 则 会 议 通知 
源码 路 径 : 光盘 \ 源 文件 ,03\3-15.html 


1 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 <html xmlns="http://www.w3.org/1999/xhtml"> 

4 <head> 

3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6 <title> 制 作 会 议 通 知 </title> 

区 </head> 

8 ”<!-- 以 下 是 页 面 的 主体 部 分 一 > 

9 <body> 

10 <h2 align="center"> 关 于 会 议 的 通知 </h2> 

3 <p> 各 职能 处 室 : </p> 

12 定 于 X 月 X 日 召开 X X X X 会 。 现 将 有 关 事宜 通知 如 下 : 

13 <br><pre> 

14 <ul> 

15 <p><li> ”会 议 议题 : 

16 <p><li> ”参加 人 员 : 

17 <br> 


岂 


18 <br> 


19 <p><li> “会议 时 间 : 从 _ 到 __ 结束 
20 <p><li> ”会议 地 点 : 

区] <p><li> ”具体 事项 : 

22 <ol> 

23 <l> 

24 <li> 

25 <li> 

26 </lol> 

27 </ul></pre> 

28 <palign="right">, 公司 

29 <palign="right"> 年 月 日 
30 </body> 

31 </html> 


注意 : 因为 这 个 代码 中 使 用 了 <pre> 标 签 来 控制 排版 格式 , 所 以 在 编写 代码 时 ,要 特别 注意 格式 的 工整 。 
【运行 程序 】 这 个 代码 最 终 在 浏览 器 中 的 显示 效果 如 图 3.17 所 示 。 
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| 各 职能 处 室 ; 
定 于 x 月 x 日 召开 x x x x 会 。 现 将 有 关 事 宜 通 知 如 下 ， 


， 二 议 议题 : 


， 。 台 加 人口: 


， 会议 时 站 : 从 到 娘 柬 
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图 3.17 制作 一 则 通知 


【深入 学 习 】 代 码 第 10 行 定义 了 通知 的 标题 ， 并 且 使 其 居中 显示 。 然 后 代码 的 第 11 一 25 行 是 通 
知 内 容 的 正文 部 分 , 设计 者 使 用 了 一 个 无 序列 表 来 罗列 通知 的 注意 事项 。 第 14 一 26 行 是 这 个 无 序列 表 ， 
其 中 在 描述 “具体 事项 ”时 ， 设 计 者 又 在 这 个 无 序列 表 中 嵌 套 了 一 个 有 序列 表 ， 用 来 罗列 “具体 事项 ” 
的 条 目 。 第 22 一 26 行 代码 是 一 个 有 序列 表 ， 第 28 行 和 第 29 行 代码 是 通知 署名 的 部 分 ， 并 使 之 右 对 齐 
显示 。 

如 果 将 这 个 页 面 上 传 到 互联 网 上 , 便 可 以 提供 给 需要 者 下 载 使 用 , 或 者 是 作为 表格 样板 直接 打印 ， 
这 样 就 省 去 了 每 次 都 要 从 “我 的 电脑 ”中 搜寻 同样 版 式 的 表格 。 


@ 


ss 网 页 设计 主人 


3.6 小 结 
本 章 主要 是 学 习 了 文本 的 编排 ， 通 过 本 章 的 学 习 ， 读 者 可 以 练习 设计 纯 文 本 的 页 面 。 其 中 主要 的 
知识 点 有 : 
使 用 <p> 或 者 <br> 标 签 使 文本 换行 
使 用 标签 改变 页 面 字体 的 大 小 。 
使 用 对 齐 属性 改变 页 面 的 排版 。 


一 些 重要 的 特殊 标签 ， 如 空格 符号 、<pre> 和 <acronym> 标 签 等 。 

在 页 面 中 使 用 列表 ， 以 及 如 何 运 用 列表 的 嵌 套 。 

最 后 ， 通 过 制作 一 则 通知 展示 了 本 章 所 学 知识 的 魅力 。 

一 个 页 面 中 只 有 文本 当然 是 不 够 的 ， 在 后 面 的 章节 中 将 学 习 如 何 编辑 页 面 中 的 图 像 ， 使 设计 出 来 
的 页 面 更 加 丰富 多 彩 。 
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习题 3-1 设置 一 个 简单 网 页 ， 并 对 网 页 中 内 容 进 行 换行 ， 效 果 如 图 3.18 所 示 。 


| emmMcss DP » 
ET TEURZO 

四 月 的 早 是 ， 天 袍 徽 亮 ， 灰 过 萤 的 去 复 答 四 著 侧 刚 破 晓 的 各 明 ， 

使 得 不 过 处 的 屋 信 着 隐 若 现 ， 社 气 蛙 没有 残留 冬季 伟 下 的 蔡 塞 ， 却 水 漫 续 续 的 咯 动 
花 的 划 贡 ， 引 去 了 拥 测 起 类 的 哺 媒 ， 驴 的 惊 叫 ， 唉 锯 了 训 姓 已 久 匆 大 灿 。 

Ee 姓 足 在 绚丽 纷呈 的 花 从 里 ， 挽 一 袖 清 理 ， 涪 注 稍 剑 ， 扒 一 兹 适 红 ， 微 笑 向 暖 。 


R100% 


图 3.18 文本 内 容 换行 效果 图 


【分 析 】 使 用 <br> 标 签 就 可 以 轻松 对 文本 进行 换行 。 
习题 3-2 在 网 页 中 添加 一 段 文字 ， 并 设置 文字 居中 对 齐 ， 效 果 如 图 3.19 所 示 。 
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一 1006 > 
图 3.19 设置 文字 居中 显示 效果 图 


【分 析 】 使 用 “align=center” 就 可 以 使 文本 居中 显示 。 
习题 3-3 ”在 网 页 中 添加 一 段 文字 ， 并 对 文字 中 的 “散文 ”进行 标注 ， 效 果 如 图 3.20 所 示 。 
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第 3 章 动手 在 网 页 中 写 fC 


(DCE | t: 
| x PSD HEV WN IAM Vw) | 
小 信和 生动 有 如 它 的 历史 可 以 志 当下 生 ,其 


. < 让 论 、 伟 记 、 涝 记 、 书 


总 100% ~ 
图 3.20 为 文字 添加 标注 效果 图 
【关键 代码 】 
<acronym tile=" 散 文 是 指 以 文字 为 创作 、 审 美 对 象 的 文学 艺术 体裁 ,是 文学 中 的 一 种 体裁 形式 "> “散文 "<acronym> 
习题 3-4 在 页 面 中 添加 一 个 无 序列 表 ， 并 设置 列表 的 项 目 符号 为 黑色 实心 的 小 方块 ， 效 果 如 
图 3.21 所 示 。 
【关键 代码 】 
<ul style="list-style-type:square;"> 
习题 3-5 ”在 页 面 上 添加 一 首 诗 ， 并 按照 预定 格式 显示 在 页 面 上 ， 效 果 如 图 3.22 所 示 。 


a [=10 kn 
(BE 失 清 弛 TMLCSS+h 及 = 已 | 局 让 清 HT 
医 JJ 同 | 可 mwermwLcsstepv ET 
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3.21 设置 无 序列 表 效果 图 图 3.22 ”定义 预 格式 化 文本 效果 图 
【分 析 】 使 用 <pre> 标 签 就 可 以 定义 与 格式 化 文本 。 
【关键 代码 】 
<pre> 
西江 月 
辛弃疾 


明月 别 枝 惊 葬 ， 清 风 半 夜 鸣 蝉 。 

稻 花香 里 说 丰年 ， 听 取 蛙 声 一 片 。 

七 八 个 星 天 外 ， 两 三 点 雨山 前 。 

旧时 茅 店 社 林 边 ， 路 转 溪 头 忽 见 。 
</pre> 
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第 4 章 将 图 像 放 入 页 面 中 


页 面 中 除去 文本 部 分 ， 最 常见 的 文件 就 是 图 像 了 。 现 实 世 界 中 ， 人 们 所 指 的 图 像 最 常见 的 莫 过 于 
相片 或 者 是 画 。 专 业 照 片 是 记录 在 胶片 上 的 ， 画 当然 是 描绘 在 画布 或 者 画 纸 上 ， 而 通常 所 说 的 数字 相 
机 记录 下 来 的 数字 照片 ， 是 存放 在 存储 卡 上 的 。 存 储 下 来 的 这 些 图 像 可 以 通过 不 同 的 浏览 器 浏览 ， 这 
种 图 像 才 是 本 书 中 所 关注 的 图 像 。 在 网 页 中 ， 一 张 图 像 可 以 大 到 覆盖 整个 页 面 的 背景 ， 也 可 以 小 到 仅 
是 一 个 LOGO， 如 图 4.1 所 示 是 YAHOO 门户 网 站 的 一 张 主页 。 
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4.1 充斥 着 图 像 的 页 面 


YAHOO 主页 中 ， 图 像 所 占 的 面积 甚至 和 文本 所 占 面积 一 样 多 。 这 样 ， 才 会 让 页 面 显得 丰富 、 直 
观 、 不 呆板 ， 吸 引 浏览 者 的 眼球 。 本 章 的 主要 知识 点 如 下 。 

计算 机 图 像 的 概念 。 

用 计算 机 术语 表达 图 像 。 

学 习 排 版 图 像 。 

制作 图 像 。 

美化 图 像 的 技巧 。 

设置 页 面 背景 。 


4.1 图 像 的 基础 知识 


在 页 面 中 放 入 图 像 不 难 , 使 用 HIML 标签 很 容易 就 可 以 做 到 , 困难 的 是 明白 放 入 何 种 格式 的 图 像 ， 


第 4 章 格 四 您 放 入 大 


如 何 修改 图 像 以 及 如 何在 网 页 中 应 用 图 像 ， 了 解 了 这 些 知 识 ， 能 使 设计 师 在 制作 页 面 时 ， 更 加 游 丸 有 
余 ， 得 心 应 手 。 


4.1.1 最 常用 的 图 像 一 一 位 图 


鳃 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 最 常用 的 图 像 一 一 位 图 .wmv 

位 图 又 称 为 光栅 图 ， 是 由 许多 像素 组 成 的 图 。 像 素 是 很 小 的 颜色 块 ， 如 马赛 克 一 样 ， 试 想 一 下 用 
小 瓷砖 拼 成 的 卫生 间 地 板 , 位 图 就 类 似 这 个 样子 。 如 图 4.2 所 示 是 一 张 放大 的 图 像 ， 当 图 像 中 模型 的 头 
部 放大 到 700 倍 时 ， 图 像 旦 现 出 锯齿 一 样 的 边缘 ， 当 图 像 放大 到 1400 倍 时 ， 只 能 看 到 图 像 中 的 一 个 一 
个 不 同 颜色 的 小 方 格 ， 这 些 单独 的 小 方 格 就 是 像素 。 像 素 表示 为 一 个 正方 形 的 颜色 块 。 


4.2 观察 图 像 的 像素 


注意 : 放大 原始 位 图 ， 会 使 图 像 效果 失真 ， 缩 小 原始 位 图 ， 同 样 会 使 图 像 效果 失真 ， 这 是 因为 缩小 图 
像 ， 减 小 的 是 图 像 中 像素 的 数量 。 


通常 位 图 又 分 为 8 位 、16 位 、24 位 和 32 位 图 。 所 谓 8 位 图 并 不 是 图 像 只 有 8 种 颜色 ， 而 是 有 28， 
即 256 种 颜色 。 从 人 眼 的 感觉 来 说 ，16 位 色 基本 能 满足 需要 了 。 而 24 位 色 又 称 为 “ 真 彩色 ”，224， 
大 概 是 1677 万 之 多 ， 这 个 数字 差不多 是 人 眼 可 以 分 辨 颜色 数 的 极限 。32 位 色 是 个 例外 ，32 位 色 并 不 
是 232 的 发 色 数 ， 其 实 也 是 1677 万 多 色 ， 不 过 它 增加 了 256 阶 颜 色 的 灰 度 ， 也 就 是 8 位 透明 度 ， 就 规 
定 它 为 32 位 色 。 

在 制作 页 面 的 时 候 , 设计 者 一 般 选 择 24 位 图 像 ，32 位 图 像 虽然 质量 更 好 ， 但 同时 也 带 来 更 大 的 图 
像 容 量 。 如 果 一 个 页 面 使 用 体积 过 大 的 画 ， 会 使 浏览 器 加 载 页 面 速 度 变 慢 ， 事 实 上 ， 一 般 肉 眼 也 很 难 
分 辨 24 位 图 和 32 位 图 的 区 别 。 


4.1.2 在 页 面 中 常用 的 位 图 格式 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 在 页 面 中 常用 的 位 图 格式 -wmv 

生活 中 ， 画 的 种 类 可 以 分 很 多 ， 如 素描 、 油 画 和 水 墨 画 等 。 在 计算 机 的 世界 里 ， 图 像 也 可 分 为 很 
多 种 格式 ， 但 是 问题 是 ， 人 们 凭借 肉眼 就 可 以 在 一 堆 画 中 分 辨 出 素描 和 油画 ， 却 不 可 能 凭借 肉眼 直观 
地 分 辨 计算 机 世界 的 图 像 ， 它 们 看 上 去 都 是 一 样 的 。 虽 然 人 眼 做 不 到 ， 但 计算 机 却 可 以 做 到 。 

计算 机 可 以 把 不 同 的 图 像 定 义 为 不 同 的 格式 ， 不 同 格式 的 图 像 有 自己 的 属性 和 特点 ， 只 要 了 解 了 
不 同 格式 图 像 的 属性 和 特点 ， 就 能 掌握 运用 图 像 的 方法 。 在 页 面 中 ， 常 用 的 3 种 位 图 图 像 格式 分 别 是 


JPEG、PNG 和 GIF 。 
® 


1. JPEG 格式 的 图 像 


JPEG 文件 是 最 常见 的 图 像 格 式 之 一 ， 后 缀 名 是 jpg。 几乎 所 有 的 软件 或 者 是 平台 都 可 以 打开 这 种 
格式 的 图 像 。JPEG 文件 是 经 过 压缩 的 一 种 图 像 ， 压 缩 的 图 像 可 以 保持 为 8 位 、24 位 和 32 位 深度 ， 压 
缩 比率 可 以 高 达 100:1。JPEG 可 以 很 好 地 处 理 大 面积 色调 的 图 像 ， 如 摄影 作品 、 相 片 。 但 是 ， 它 不 适 
用 于 色彩 对 比 强烈 、 有 清晰 边界 、 简 单 构图 的 图 像 ， 如 LOGO、BANNER。 


2. PNG 格式 的 图 像 


PNG 文件 的 后 缀 名 是 .png。 这 是 一 种 能 够 存储 32 位 信息 的 位 图 图 像 ， 采用 的 是 一 种 无 损 压 缩 的 方 
式 。 目 前 , 已 经 在 Web 上 广泛 流行 。 此 外 ， 它 支持 透明 信息 。 所 谓 透明 ， 即 图 像 可 以 浮现 在 其 他 页 面 
文件 或 页 面 图 像 之 上 。 可 以 说 ，PNG 文件 是 专门 为 Web 创造 的 图 像 ， 通常 大 部 分 页 面 设计 者 在 页 面 中 
加 入 LOGO 或 者 是 一 些 点 级 的 小 图 像 时 ， 都 会 选择 使 用 PNG 文件 。 


3. GIF 格式 的 图 像 


GIF 是 一 种 图 像 交 互 格式 ， 后 缀 名 是 .gif， 它 只 支持 256 色 以 内 的 图 像 。 所 以 ，GIF 文件 的 图 像 效 
果 是 很 差 的 。 但 是 ，GIF 文件 有 一 个 最 大 的 特点 ， 就 是 可 以 制作 动画 ， 图 像 制 作者 利用 图 像 处 理 软件 ， 
将 静态 的 GIF 图 像 设 置 为 单 帧 画面 ， 然 后 把 这 些 单 帧 画面 连 在 一 起 ， 设 置 好 上 一 个 画面 到 下 一 个 画面 
的 间隔 时 间 ， 最 后 保存 为 GIF 格式 就 可 以 了 。 可 以 说 ， 这 就 是 简单 的 逐 帧 动画 。 目 前 这 种 格式 的 动画 
在 互联 网 上 广 为 流 行 。 

总 体 来 说 ， 这 3 种 图 像 使 用 上 各 有 千秋 ，JPEG 可 以 压缩 图 像 的 容量 ，PNG 的 质量 较 好 ，GIF 可 以 
做 动画 。 所 以 , 当 处 理 色 调 复杂 、 绚丽 的 图 像 时 , 如 照片 、 图 画 等 , 适合 使 用 JPEG; 而 处 理 一 些 LOGO、 
BANNER、 简 单线 条 构图 的 时 候 ， 适 合 使 用 PNG; GIF 通常 只 是 用 来 表达 动画 效果 。 

当然 ， 位 图 图 像 的 格式 还 有 很 多 ， 如 BMP、TGA、TIFF 和 PSD 等 ， 这 些 在 页 面 中 并 不 常用 。 这 
些 格式 的 图 片 容量 都 较 大 ,通常 图 像 设计 者 为 了 保证 图 像 的 质量 ,使 用 这 些 格 式 的 图 片 进 行 设计 修改 ， 
最 后 成 品 仍 需 要 转换 为 网 页 中 常用 的 图 像 格式 。 


注意 : 对 于 图 像 使 用 ， 并 没有 特别 严格 的 要 求 ， 设 计 者 可 以 依照 自己 的 习惯 选择 使 用 不 同 格式 的 图 像 。 


4.1.3 奇妙 的 矢量 图 
合 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 奇 妙 的 矢量 图 .wmv 


计算 机 中 显示 的 图 形 一 般 分 为 两 大 类 ， 前 面 章节 中 介绍 的 是 位 © 
图 ， 这 是 其 中 一 种 ， 而 另 一 种 就 是 矢量 图 。 矢 量 图 和 位 图 最 大 的 区 别 。 | @ 坊 @ ”0 只 
在 于 ， 前 者 无 论 图 像 缩放 多 少 倍 ， 都 不 会 影响 其 效果 ， 而 后 者 会 有 损 © 于 
图 像 质量 。 如 图 4.3 所 示 ， 把 “小 乌龟 ” 眼 部 放大 800 倍 之 后 ， 可 以 a 色 
看 到 ，“ 眼 睛 ”部 位 的 边缘 并 没有 失真 。 

矢量 图 是 以 一 种 数学 描述 的 方式 来 记录 图 像 内 容 的 图 像 格式 。 3 


如 一 个 方程 y=kx， 当 这 个 小 方程 体现 在 坐标 系 上 的 时 候 ， 设 置 不 同 
的 参数 可 以 绘制 不 同 角度 的 直线 ， 这 就 是 矢量 图 的 构图 原理 。 矢 量 图 一 般 以 线条 、 曲 线 和 色 块 为 主 ， 
不 宜 用 于 制作 色调 丰富 、 效 果 绚 丽 的 图 像 ， 其 文件 所 占 的 容量 也 比较 小 。 

矢量 图 由 于 可 以 随意 放大 和 缩小 的 特点 ， 通 常 被 看 作 是 一 种 图 像 模板 放 在 图 库 中 ， 这 样 方便 设计 


© 
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者 备用 保存 ， 在 需要 的 时 候 使 用 。 遗 憾 的 是 ， 矢 量 图 不 易 制作 色调 复杂 的 图 像 ， 这 一 局 限 迫 使 设计 者 
一 般 只 愿意 将 LOGO、UI 图 标 和 标识 符号 等 简单 图 像 存 为 矢量 图 。 


技巧 : 矢量 图 的 后 组 一 般 有 .ai、.cdf、. 也 、.swf 等 。.ai 后 缓 的 文件 是 一 种 静 帧 的 矢量 文件 格式 ，.cdf 后 缓 
的 文件 多 以 工程 图 为 常见 。 而 .swf 烙 式 文件 其 实 指 的 就 是 Flash，Flash 也 是 页 面 中 最 常见 的 一 种 
动画 ， 将 在 后 面 的 章节 中 介绍 。 


4.1.4 图 像 的 分 辨 率 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 图 像 的 分 辩 率 .wmv 

分 辨 率 ， 即 每 英寸 显示 的 像素 ， 单 位 是 dpi (display pixels/inch) 。 通 常 所 指 的 分 辩 率 分 为 屏幕 分 
辨 率 和 图 片 分 辩 率 。 

屏幕 分 辨 率 即 指 计算 机 显示 器 默认 的 分 辩 率 .一般 来 说 , 目前 大 部 分 显示 器 的 分 辨 率 是 1024X768。 
也 就 是 说 ， 如 果 设计 者 制作 的 页 面 范 围 超过 了 显示 器 默认 的 分 辨 率 ， 那 么 即使 是 在 浏览 器 全 屏 的 情况 
下 ， 页 面 也 不 能 完全 在 浏览 器 中 展示 出 来 ， 这 种 情况 下 ， 浏 览 器 中 就 会 出 现 滚动 滑 条 。 

图 片 分 辩 率 是 用 于 量度 位 图 图 像 内 数据 量 多 少 的 一 个 参数 。 分 辩 率 越 高 的 图 像 ， 包 含 的 数据 越 多 ， 
图 像 的 容量 也 大 ， 需 要 消耗 更 多 的 计算 机 资源 ， 需 要 更 大 的 存储 空间 。 所 以 ， 对 于 页 面 开发 者 ， 选 择 
适当 的 图 片 才 是 最 好 的 选择 。 
注意 : 并 不 是 说 图 片 分 辩 率 越 高 的 图 像 就 一 定 越 清晰 ， 还 要 看 图 像 本 身 制作 的 水 准 。 


那么 ， 像 素 和 分 辨 率 又 有 什么 关系 呢 ? 分 辩 率 指 的 是 每 英寸 的 像素 值 ， 通 过 像素 和 分 辩 率 的 换算 
可 以 测算 长 度 。 例 如 ， 一 幅 400X300 分 辨 率 的 图 像 ， 在 一 个 屏幕 分 辩 率 为 300dpi 的 浏览 器 中 ， 最 终 
图 像 的 长 和 宽 是 通过 分 辩 率 和 像素 的 换算 得 出 的 : 
1 英寸 =2.54 厘米 
(400/300) X2.54 厘米 =3.39 厘米 
(300/300) X2.54 厘米 =2.54 厘米 
那么 最 终 显示 的 是 一 幅 长 约 3.39 厘米 ， 宽 2.54 厘米 的 图 片 。 所 以 ， 当 遇 到 不 同 屏幕 分 辨 率 的 显示 
器 时 ， 换 算 成 厘米 的 数值 也 是 不 同 的 。 


4.1.5 认识 一 些 网 页 中 常用 的 BANNER 尺寸 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 认 识 一 些 网 页 中 常用 的 BANNER 尺寸 .wmv 

在 网 页 中 , 经 常 涉及 使 用 BANNER，BANNER 是 指 网 幅 广 告 、 旗 帜 广告 和 横幅 广告 等 。 一 个 优秀 
的 页 面 ， 不 仅 放 入 的 BANNER 要 美观 精致 ， 同 时 ， 更 要 符合 页 面 的 风格 。BANNER 有 一 定 的 格式 标 
准 可 供 参考 ， 但 不 是 说 一 定 要 完全 严格 遵循 。 几 种 国际 尺寸 的 BANNER 如下。 

468X60: 全 尺寸 BANNER， 应 用 最 为 广泛 的 广告 条 尺寸 ， 用 于 页 眉 或 页 脚 。 

392X72: 全 尺寸 带 导航 条 BANNER， 主 要 用 于 有 较 多 图 片 展示 的 广告 条 ， 用 于 页 眉 或 页 脚 。 

234X60: 半 尺 寸 BANNER， 这 种 规格 适用 于 框架 或 左右 形式 主页 的 广告 链接 。 

125X125: 方形 按钮 ， 这 种 规格 适 于 表现 照片 效果 的 图 像 广告 。 

120X90: 按钮 类 型 ， 主 要 应 用 于 产品 演示 或 大 型 LOGO。 
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120X 60: 按钮 类 型 ， 这 种 广告 规格 主要 用 于 LOGO 使 用 。 
88X31: 小 按钮 ， 主 要 用 于 网 页 链接 ， 或 网 站 小 型 LOGO 。 
120X240: 垂直 BANNER。 


说 明 : 读者 可 以 依照 这 些 参考 数据 ， 裁 定 自己 放 入 页 面 中 的 BANNER 大 小 。 


4.2 用 图 像 编织 美丽 的 页 面 


图 像 是 增加 网 页 可 视 效 果 的 最 有 力 武 器 之 一 。 在 语言 文字 无 法 描述 的 地 方 ， 一 些 只 可 意 会 无 法 言 
传 的 表达 中 ， 也 许 使 用 一 张 图片 就 可 以 完美 传达 设计 者 的 信息 。 本 节 将 介绍 如 何在 页 面 中 放 入 图 像 、 
编辑 图 像 。 


4.2.1 理解 图 像 路 径 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 理 解 图 像 路 径 .wmv 

在 页 面 中 放 入 图 像 ， 实 际 上 是 使 用 了 服务 器 中 的 一 张 图 片 。 设 计 者 把 所 有 的 图 片 放 在 一 台 服 务 器 
中 某 个 文件 夹 中 ， 然 后 通过 HTML 语言 告诉 浏览 器 这 些 图 片 放 在 哪里 ， 即 图 片 的 路 径 ， 当 用 户 浏览 页 
面 的 时 候 ， 浏 览 器 会 解析 这 张 图 片 ， 通 过 获知 的 路 径 找到 这 张 图 片 。 在 页 面 文 档 中 ， 使 用 <img/> 标 签 
将 图 像 放 入 页 面 中 ， 使 用 的 格式 如 下 : 


<img src=” alt="" /> 


<img/> 标 签 是 单 标签 ， 在 最 后 要 加 一 个 “/” 来 进行 标签 的 闭合 。imsg 表示 image，src 表示 source， 
即 图 片 的 源 。 标 签 中 ，src 属性 用 来 指定 图 像 所 在 的 位 置 ，alt 属性 指定 关于 图 像 的 描述 性 文本 。 如 果 浏 
览 器 不 能 正确 显示 图 像 ， 浏 览 者 将 看 到 alt 属性 注释 的 文本 。 如 实例 4-1 中 的 这 幅 图 像 。 

【实例 4-1】 本 实例 在 页 面 中 添加 了 一 张 图 像 ， 并 设置 了 alt 属性 。 


re 实例 4-1: 在 页 面 中 添加 一 张 图 像 ， 并 设置 alt 属性 
源码 路 径 : 光盘 \ 源 文件 ,04\4-1.html 


<head> 
<title> 在 页 面 中 添加 图 像 </title> 
</head> 
<body style="text-align:center"> <!-- 令 文本 居中 显示 --> 
<h3> 向 左 走 向 右 走 
</h3> 
<p><img src="4.1.jpg" alt=" 向 左 走向 右 走 "/> <!-- 添 加 图 像 --> 
</body> 
10 </html> 


注意 : <img/> 标 签 中 的 儿 杠 如 果 省 略 也 可 以 ， 但 是 ，XHTML 标准 要 求 任何 空 单 标签 ， 即 没有 结束 标签 
的 标签 ， 都 要 在 结尾 包含 一 个 斜 杠 。 
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【运行 程序 】 最 终 在 页 面 中 的 显示 效果 如 图 4.4 所 示 。 


[a | 
(HO | Sarre 
EE 二 MG En 二 
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向 碟 走 - 向 作 走 ss 
和 x Slemmcu pole 
名 举证 呈 Er 
向 左 走 向 右 走 
2 j 加 向 # 志 下 
| 显示 图 像 出 现 错误 
| ms Es A 下 100%w = | 
正常 显示 图 像 
4.4 在 页 面 中 添加 图 片 


【深入 学 习 】 如 代码 中 第 8 行 ，src 属性 用 来 指向 “图 片 ”文件 夹 中 的 “向 左 向 右 ” 这 张 JPEG 图 
片 。alt 属性 指定 对 这 张 图 片 的 注释 ， 如 果 浏 览 者 不 能 看 到 图 片 ， 将 能 看 到 设计 者 对 图 片 的 注释 “向 左 


走向 右 走 ”。 


4.2.2 ” 像 编 辑 文本 对 齐 一 样 在 页 面 中 对 齐 图 像 


名 8 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 像 编辑 文本 对 齐 一 样 在 页 面 中 对 齐 图 像 .wmv 

可 以 像 编辑 文本 一 样 在 一 个 页 面 中 放 入 图 像 ， 令 图 像 左 对 齐 、 右 对 齐 或 者 居中 对 齐 。 只 要 在 <img/> 
标签 中 加 入 align 属性 就 可 以 了 ， 如 实例 4-2 所 示 。 

【实例 4-2】 本 实例 在 页 面 中 插入 了 3 张 图 像 ， 并 对 这 3 张 图 像 设 置 不 同 的 对 齐 方式 。 


1 <html> 

区 <head> 

:| <title> 在 页 面 中 对 齐 图 片 </title> 

4 </head> 

5 < 

6 <h2> 图 像 排列 </h2> 

a <br> 

8 <p align="center"><img src="4.2.jpg" /> 
9 </p> 

10 <p ><img src="4.5.jpg" align="left" /> 
11 <img src="4.4.jpg" align="right"/> 
12 </body> 

13 </html> 


实例 4-2: 在 页 面 中 插入 3 张 图 像 ， 并 设置 不 同 的 对 齐 方式 
源码 路 径 : 光盘 \ 源 文件 ,04\4-2.html 


<!-- 这 里 是 文本 的 标题 -> 
<!-- 使 图 像 居中 对 齐 一 > 


< 上 -使 图 像 居 左 对 齐 --> 
<!- 使 图 像 居 右 对 齐 一 > 


【运行 程序 】 浏 览 该 页 面 ， 其 效果 如 图 4.5 所 示 。 


4.5 页 面 中 图 片 的 对 齐 属性 使 用 


【深入 学 习 】 如 实例 中 第 10、11 行 ， 图 像 的 对 齐 和 文本 对 齐 在 使 用 代码 上 略 有 不 同 ， 当 对 图 像 全 
令 左 对 齐 和 右 对 齐 时 ，align 属性 可 以 放 在 <img/> 标 签 内 ， 也 可 以 放 在 <p> 标 签 或 者 其 他 标签 内 ， 而 居 
中 对 齐 的 命令 放 在 <img/> 标 签 内 不 起 作用 ， 图 片 依然 是 左 对 齐 。 

同时 ， 第 10、11 行 中 的 属性 命令 实际 上 还 针对 和 图 像 并 列 的 文本 内 容 ， 可 以 理解 为 使 图 像 放 在 广 
本 的 左边 ， 或 者 是 使 图 像 放 在 文本 的 右边 。 所 以 ， 从 这 个 角度 就 可 以 理解 ， 为 什么 属性 中 没有 居中 对 
齐 的 使 用 命令 。HTML 语言 活用 的 方法 有 很 多 ， 需 要 慢 慢 地 累积 经 验 。 
注意 ; 目前 ， 在 设计 页 面 版 块 的 时 候 ， 通 常 在 放置 图 片 前 ， 会 先 设计 好 表格 、 框 架 或 者 使 用 层 ， 这 些 

在 后 面 的 章节 中 会 继续 介绍 ， 而 这 种 放置 图 片 的 方法 是 学 习 HTML 语 言 的 基础 ， 并 不 实用 。 


4.2.3 图 像 与 文本 的 对 齐 方式 


镶 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 图 像 与 文本 的 对 齐 方式 .wmv 

在 编辑 图 像 的 时 候 ， 不 同 于 文本 的 地 方 在 于 ， 图 像 都 是 一 个 个 分 开 的 整体 ， 在 编辑 图 像 时 ， 如 果 
设计 者 想 在 图 像 的 旁边 放 入 文本 内 容 , 就 需要 考虑 如 何 处 理 文本 和 图 像 的 对 齐 方式 。 在 HTML 文档 中 ， 
分 为 4 种 。 

使 图 像 的 顶部 和 同一 行 的 文本 对 齐 ， 代 码 如 下 : 


<img src=" style="vertical-align:text-top"/> 
使 图 像 的 中 部 和 同一 行 的 文本 对 齐 ， 代 码 如 下 : 
<img src=" style="vertical-align:middle"/> 

使 图 像 的 底部 和 同一 行文 本 对 齐 ， 代 码 如 下 : 


<img src="" style="vertical-align:text-bottom"/> 


@ 
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使 图 像 的 底部 和 文本 的 基线 (文本 的 底部 ) 对齐， 代码 如 下 : 


<img style="vertical-align:baseline"/> 


【实例 4-3】 本 实例 为 图 像 和 文本 设置 了 对 齐 方式 ， 分 别 使 用 了 text-top、middle 和 baseline 这 3 
种 对 齐 样式 。 


<head> 
<title> 图 像 与 文本 的 对 齐 </title> 
</head> 


<body> 
<h4> 图 像 与 文本 的 对 齐 方式 </h4> 
<p><img src="4.6.jpg" style="vertical-align:text-top"/> 亡 灵 掌 握 着 许多 威力 
十 足 的 魔法 ， 包 括 操纵 死去 的 战士 作战 的 恐怖 魔法 。 
<!-- 文 本 和 图 像 顶 部 对 齐 --> 
<p><img src="4.6.jpg" style="vertical-align:middle"/> 兽 人 类 似 人 族 ， 但 拥有 巨大 的 
力量 和 鼎 高 的 生命 值 。 
<!- 文 本 和 图 像 中 间 对 齐 --> 
<p><img src="4.6jpg" style="vertical-align:baseline"/> 巨 魔 猎手 用 嗅觉 灵敏 能 力 
追踪 宿敌 ， 它 们 更 倾向 于 在 黑暗 中 猎 杀 对 手 。 
<!- 文 本 和 图 像 底 部 对 齐 --> 
</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 其 效果 如 图 4.6 所 示 。 
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图 4.6 图 像 与 文本 的 对 齐 方 式 


说 明 : baseline 属 性 的 效果 和 text-bottom 属 性 几乎 相同 ， 后 者 文本 不 会 超出 图 片 的 下 边线 ， 可 参考 图 中 
text-top 属 性 的 样式 ， 文 本 最 上 线 没 有 超过 图 像 上 线 。 
® 


4.2.4 控制 图 像 与 文本 的 距离 


印 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 控 制图 像 与 文本 的 距离 .wmv 

编辑 页 面 时 ， 除 了 可 以 控制 图 像 与 文本 的 编排 方式 外 ， 还 可 以 进一步 调整 图 像 和 文本 的 距离 。 当 
设置 好 图 片 和 文本 的 距离 后 ,可 利用 hspace 和 vspace 属性 分 别 控制 图 像 四 周 与 其 他 内 容 间隔 的 水 平方 
向 的 宽度 和 垂直 方向 的 高 度 ， 语 法 结构 如 下 : 


<image src=" hspace= 数 值 > 
<image src=" vhspace= 数 值 > 


其 中 ， 数 值 代表 图 像 四 周 与 其 他 内 容 间隔 的 水 平方 向 的 宽度 和 垂直 方向 的 高 度 ， 用 像素 来 表示 。 
这 种 效果 可 以 令 页 面 展示 出 更 多 不 一 样 的 特色 。 
【实例 4-4】 本 实例 介绍 控制 图 像 与 文本 的 水 平和 垂直 距离 的 方法 。 


re 实例 4-4: 介绍 控制 图 像 与 文本 的 水 平和 垂直 距离 的 方法 
村 源码 路 径 : 光盘 \ 源 文件 ,04\4-4.html 


<head> 

<title> 图 像 与 文本 的 距离 控制 </title> 
</head> 
<body> 

<h4> 图 像 与 文本 的 距离 控制 </h4> 

<img src="4.3jpg" hspace=40 /> 这 段 文 字 距离 左边 图 像 的 距离 是 40px。 

<p><img src="4.3.jpg" Vspace=50 /><br> 这 段 文字 距离 上 边 图 像 的 距离 是 50px。 

</body> 


p= 


【运行 程序 】 从 图 4.7 中 可 以 看 出 这 一 效果 。 
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这 段 文字 距离 上 边 图 像 的 距离 是 0px 


图 4.7 控制 图 像 与 文本 的 距离 


第 4 章 “将 加 像 放 入 页 而 


注意 : 第 一 幅 图 左右 两 边 的 距离 都 是 40px， 而 下 一 幅 图 中 ， 上 下 两 边 的 距离 都 是 50px。 


【深入 学 习 】 在 设置 距离 数值 时 ， 使 用 的 标准 单位 是 像素 ， 英 文 缩写 为 px。“hspace=40” 表 明 控 
制图 像 左 右 两 边 与 页 面 其 他 内 容 间 隔 40px 的 距离 。 同 样 ，“vspace=50” 表 明 图 像 上 下 两 边 与 页 面 其 
他 内 容 的 间隔 距离 是 50px。 


4.3 让 图 像 变 得 更 美观 


如 果 使 用 Google 或 者 百度 ， 设 计 者 可 以 找到 所 需要 的 图 像 。 可 是 ， 这 些 图 像 又 不 可 能 完全 符合 设 
计 者 的 想法 ， 每 个 设计 者 总 要 面 对 这 样 的 问题 ， 如 改变 图 像 的 大 小 ， 截 选 图 片 的 部 分 区 域 等 。 在 这 一 
节 当 中 ， 将 介绍 修改 图 像 的 方法 。 


4.3.1 修改 图 像 的 宽度 和 高 度 


鳃 al 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 修 改 图 像 的 宽度 和 高 度 .wmv 

在 网 页 中 插入 图 片 时 使 用 width 属性 ， 可 以 设置 插入 的 图 片 的 宽度 。 在 设置 了 图 片 宽度 以 后 ， 计 
算 机 会 根据 指定 的 宽度 适当 地 调整 图 片 的 高 度 。width 属性 语法 结构 如 下 : 

<img src=" 路 径 " width=" 宽 度 " /> 

和 设置 图 片 的 宽度 一 样 , 在 网 页 中 插入 图 片 的 时 候 也 可 以 设置 图 片 的 高 度 。height 属性 就 是 用 来 设 
置 图 片 的 高 度 的 。 在 设置 了 图 片 的 高 度 ， 没 设置 图 片 宽度 时 ， 计 算 机 会 根据 指定 的 高 度 适当 地 调整 图 
片 的 宽度 。height 属性 和 width 属性 的 用 法 一 样 ， 其 语法 结构 如 下 : 

<img src=" 路 径 " height=" 高 度 " /> 


【实例 4-5】 本 实例 中 分 别 对 两 张 图 像 设置 了 宽度 和 高 度 。 


国 实例 4-5: 分 别 对 两 张 图 像 设 置 宽度 和 高 度 
源码 路 径 : 光盘 \ 源 文件 04M-5.html 


可 

2 <head> 

3 <title> 图 像 的 宽度 和 高 度 </title> 

4 </head> 

5 <body> 

6 <h4> 图 像 的 宽度 和 高 度 </h4> 

区 <img src="4.3.jpg" width="300" /> 图 像 宽度 为 300 像素 < 上 -设置 图 像 宽度 --> 
8 <img src="4.3jpg" height="100"/> 图 像 高 度 为 200 像素 <!- 设 置 图 像 高 度 -> 
9 


【运行 程序 】 在 页 面 中 显示 的 效果 如 图 4.8 所 示 。 


图 赂 宽 度 为 300 像 素 图 像 高 度 为 200 像 素 


100% ~ 


图 4.8 设置 图 像 宽度 和 高 度 


【深入 学 习 】 尽 量 不 要 随意 设置 一 张 图 像 的 宽度 和 高 度 ， 否 则 容易 导致 图 像 变 形 。 如 将 实例 4-5 
中 的 第 一 幅 图 像 同时 设置 宽度 为 300px， 高 度 为 100px， 效 果 如 图 4.9 所 示 ， 可 以 看 出 ， 图 像 发 生 了 
变化 。 


- 


4.9 图 像 发 生变 形 
注意 : 一 般 只 单独 设置 图 像 的 宽度 或 高 度 ， 而 不 会 一 起 设置 。 


4.3.2 不 一 样 的 改变 一 一 给 图 像 添 加 边框 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 不 一 样 的 改变 一 一 给 图 像 添加 边框 .wmv 

编辑 图 像 时 ， 有 一 种 使 用 频 度 很 高 的 修饰 图 片 的 方式 ， 那 就 是 给 图 像 添加 边框 。 虽 然 这 是 对 图 片 
小 小 的 修饰 ， 但 是 带 来 的 效果 是 相当 突出 的 。 在 <img/> 标 签 中 添加 border 属性 可 以 为 图 像 添加 边框 ， 
其 语法 结构 如 下 : 


<img src="..." border= > 


其 中 ，border 属性 下 输入 像素 值 ， 指 边框 的 宽度 。 
【实例 4-6】 本 实例 给 图 像 添加 了 一 个 边框 宽度 为 8 像素 的 边框 。 


re ' 实例 4-6: 给 图 像 添加 一 个 边框 宽度 为 8 像素 的 边框 
源码 路 径 : 光盘 \ 源 文件 ,04M4-6.html 


1 <html> 

2 <head> 

3 <title> 给 图 像 添加 边框 </title> 
4 </head> 

5 <body> 

6 <h4> 添 加 图 像 边框 </h4> 


第 4 章 将 四 像 放 入 而 aa 


区 <p align=center> 

8 <img src="4.4.jpg" border=8 > <!- 给 图 像 添加 边框 -> 
9 </p> 

10 </body> 

11 </html> 


【运行 程序 】 在 页 面 中 显示 的 效果 如 图 4.10 所 示 。 
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图 4.10 添加 图 像 边框 
【深入 学 习 】 为 图 像 添加 了 边框 之 后 ， 在 页 面 中 显得 更 突出 ， 使 图 像 有 了 一 种 个 性 化 的 标识 。 如 


果 读 者 掌握 了 CSS 的 规则 ， 甚 至 可 以 改变 图 像 边 框 的 颜色 ， 修 改 图 像 的 边 角 。 这 些 将 在 后 面 的 篇 章 中 
具体 介绍 。 


注意 : 这 里 修饰 的 做 法 并 没有 将 结构 和 表现 分 离 。 当 了 解 了 CSS 样 式 表 之 后 ， 可 以 使 用 一 种 更 好 的 方法 。 


4.3 


.3 独树一帜 的 水 平 线 


能 4 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 4 章 \ 独 树 一 帜 的 水 平 线 -wmv 
在 设计 页 面 的 时 候 ， 经 常 需 要 在 网 页 中 插入 一 条 水 平 线 来 隔 开 文本 ， 或 者 是 为 了 起 到 美化 页 面 的 


作用 


。 水 平 线 是 设计 页 面 中 的 一 个 特殊 的 小 部 分 ， 使 用 页 面 标签 <hr> 可 以 实现 这 个 功能 ， 代 码 如 下 : 
<hr align="..." width="..." size="..." color="..."> 


<hr> 标 签 即 是 放 入 水 平 线 的 意思 。 在 编辑 水 平 线 时 , 可 以 使 用 align 属性 编辑 其 对 齐 模式 。 在 width 


属性 和 size 属性 下 填 入 具体 的 数字 ， 单 位 是 像素 。width 属性 表示 水 平 线 的 长 度 ，size 属性 表示 水 平 线 


的 宽度 。 


【实例 4-7】 本 实例 在 文本 和 文本 之 间 插 入 了 一 条 居中 显示 、 宽 4px、 高 500px 的 水 平 线 。 


re 实例 4-7: 在 文本 和 文本 之 间 插 入 一 条 水 平 线 
源码 路 径 : 光盘 \ 源 文件 ,04M-7.html 


+CSS 网 页 设计 详解 


入 <title> </title> 

| </head> 

5 <| 

6 <h4> 添 加 水 平 线 </h4> 

7 都 说 人 生 似 飘 萍 ， 游 走 在 流光 激 沾 中 ， 习 惯 了 看 流 消 的 风景 ， 习 惯 了 嗅 被 岁月 尘 

8 ” 封 的 梅香 ， 习 惯 了 走 打 灯 莲 步 。 总 之 ， 习 惯 了 别人 不 曾 习 惯 的 东西 ， 想 做 夕阳 古道 里 的 一 缕 遗 
9 ” 风 ， 静 嗅 一 个 个 温情 的 故事 ; 想 当 轮 回 道里 一 缕 飘 选 的 游 魂 ， 看 着 奈何 桥 上 过 往 成 双 的 恋人 。 

10 <hr align="center" size="4px" widtth="500px"> <!-- 插 入 水 平 线 --> 

11 ”我 的 决定 里 ， 不 曾 有 过 遗憾 ， 因 为 选择 ， 所 以 无 悔 。 不 想 被 岁月 囚禁 ， 拾 装 逃 适 ， 作 别 旧 地 ， 

12 ”浪迹 天 涯 。 待 到 解 舟 东 流 之 时 ， 才 习 然 明白 ， 这 一 生 不 过 一 场 穿越 ， 谁 不 是 这 隐隐 尘世 里 的 一 
13 “个 过 客 呢 ? 

14 </lbody> 

15 </html> 


【运行 程序 】 在 页 面 中 显示 的 效果 如 图 4.11 所 示 。 


EECT prc P ~ © | @ csorEs0 Doraop 2 x BO 
文件 朋 ” 需 梳 [E) ”全 看 (V) 收 荐 夫 (A) 工具 (T) 大 动 (HD 


|| 活 加 水 平 线 
A 潜在 马 介 了 兴 流 消 的 风景， 有 有 Ey 
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里， 不 匀 ， 因 为 选择 。 所 以 无 侍 。 不 想 被 岁月 囚禁 。 拾 蒜 进 适 ， 作 别 
滨 和 之 时 ， 才 忧 然 明白 ， 这 一 生 不 过 一 场 穿越 ， 谁 不 是 这 隐 
世 里 的 一 个 


所 100% ~ 
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4.11 在 网 页 中 插入 水 平 线 


4.4 改变 页 面 的 背景 


名 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 4 章 \ 改 变 页 面 的 背景 .wmv 

放 入 背景 图 像 的 方式 和 插入 图 像 的 方式 是 不 同 的 。 添 加 图 可 以 放 入 页 面 中 的 任意 位 置 ， 但 是 不 能 
在 插图 上 编辑 页 面 内 容 。 而 背景 图 像 就 是 整个 页 面 的 最 底层 ， 原 先是 一 片 空白 的 页 面 改 成 了 一 张 图 像 

已 。 设 计 者 可 以 在 背景 图 像 上 放 入 任何 页 面 内 容 ， 使 用 的 页 面 代码 如 下 : 

<body background="#"> <!- 设 置 网 页 背景 图 像 -> 

</body> 
其 中 ，“#” 号 部 分 填写 的 是 图 片 的 路 径 。background 属性 就 是 用 来 设置 背景 图 像 的 。 
技巧 : 当 图 像 大 小 不 能 填 满 背景 时 ,background 属 性 可 以 使 背景 图 像 根 据 网 页 的 大 小 自动 复制 多 个 图 像 

来 覆盖 满 一 个 网 页 的 背景 。 
【实例 4-8】 本 实例 在 网 页 中 插入 了 一 张 背景 图 像 。 


re 实例 4-8: 在 网 页 中 插入 一 张 背景 图 像 
源码 路 径 : 光盘 \ 源 文件 \04\4-8.html 


<html> 
<head> 
<title> 添加 页 面 背景 </title> 
</head> 
< body background=" 网 页 背景 jpg"> < 上 -添加 网 页 背景 -> 
<h2> 添 加 页 面 背景 </h2> 
</body> 
</html> 


【运行 程序 】 在 浏览 器 中 显示 的 效果 如 图 4.12 Wess 


omAoDm 上 whN 一 


图 4.12 ”添加 页 面 背 景 


【深入 学 习 】 第 5 行 代码 引用 了 一 张 名 为 “网 页 背景 ”的 图 片 ， 并 且 在 背景 图 像 上 输入 了 “添加 
页 面 背景 ”文字 。 


4.5 案例 : 把 宠物 的 照片 放 到 网 页 上 去 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 案 例 : 把 宠物 的 照片 放 到 网 页 上 去 .wmv 

本 章 涉及 了 很 多 编辑 图 像 的 技法 ， 本 节 通 过 运用 这 些 技法 ， 将 这 些 技能 运用 到 实际 操作 中 。 现 在 
很 多 人 有 自己 的 宠物 ， 有 些 用 户 会 把 自己 的 宠物 照片 放 到 互联 网 上 ， 给 自己 的 宠物 找 玩 伴 ， 以 此 来 认 
识 同 样 喜 爱 宠物 的 朋友 。 在 这 个 案例 中 ， 将 学 习 如 何 将 宠物 照片 放 到 互联 网 上 。 

首先 ， 需 要 对 这 个 宠物 页 面 给 出 一 个 设计 方案 ， 明 确 基本 的 构思 。 如 在 这 个 实例 中 ， 需 要 3 个 设 
计 要 点 。 

一 个 页 面 的 BANNER。 

宠物 的 图 像 要 放 在 页 面 的 右 侧 ， 应 该 给 图 像 加 上 边框 。 

定义 页 面 的 文本 内 容 ， 放 在 页 面 的 左 侧 。 

当 设 计 者 规划 好 这 3 部 分 之 后 ， 就 逐一 放 到 代码 文档 中 去 ， 如 实例 4-9 所 示 。 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 我 的 宠物 </title> 


</head> 


<body> 
<p><img src="banner.jpg"/></p> <!-- 这 里 放 入 BANNER--> 
<p> 
<p> 
<p><h2>Jerry</h2> 
<p><img src=" 我 的 宠物 jpg" width="192" height="262" border="2" 
align="right"/> <!-- 这 里 放 入 图 像 --> 
</p> 
<p> 年 龄 : 24<br/> 
最 喜爱 的 食物 : 小 虾 、 肉 <br/> 


特点 : 很 安静 </p> 

<p><hr align="left" width="400" size="3" > <!- 这 里 放 入 水 平 线 --> 
<p>&nbsp; 更 新 宠物 日 记 </p> 
<hr align="left" width="400" size="3" > <!-- 这 里 放 入 水 平 线 --> 


<p>2013 年 3 月 1 号 </p> 
<p>&nbsp; 外 面 的 天 气 还 是 很 热 ， 所 以 Jerry 一 直 都 懒 懒 的 趴 在 那里 ， 好 久 也 .… 
</body> 
</html> 


【运行 程序 】 这 个 案例 最 后 在 浏览 器 中 的 显示 效果 如 图 4.13 所 示 。 
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图 4.13 我 的 宠物 


【深入 学 习 】 页 面 主体 中 ， 即 <body> 标 签 内 ， 其 中 第 10 行 代码 表示 放 入 页 面 的 BANNER。 第 14 
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第 4 章 将 @ 像 放 入 贡 遇 上 


行 中 表示 放 入 页 面 中 宠物 的 照片 ， 使 其 居 右 ， 这 样 ， 页 面 中 的 文本 就 在 图 像 的 左 侧 排列 。 第 20 行 和 第 
22 行 表示 水 平 线 ， 它 的 长 度 为 400px， 宽 度 为 3px， 令 其 左 对 齐 。 


注意 : 设计 师 一 般 在 使 用 图 像 之 前 部 会 先 设计 好 图 像 的 大 小 。 
46 小 结 


本 章 中 ， 主 要 介绍 了 关于 页 面 中 图 像 的 知识 。 重 要 的 知识 点 有 : 

图 像 分 为 位 图 和 矢量 图 ， 设 计 者 经 常 使 用 JPEG、PNG 和 GIF 图 像 放 在 页 面 中 。 

图 像 的 分 辨 率 和 像素 。 

图 像 和 图 像 之 间 以 及 图 像 和 文本 之 间 排 版 的 方法 。 

HTML 中 使 用 代码 给 图 像 添加 边框 和 在 页 面 中 放 入 水 平 线 。 

设置 页 面 背景 并 有 效 地 控制 页 面 背 景 。 

最 后 ， 本 章 通过 一 个 综合 实例 展示 了 这 些 知 识 点 的 实际 应 用 效果 ， 这 样 的 页 面 显然 比 纯 文 本 的 页 
面 更 美观 , 但 是 还 不 够 。 优 秀 的 页 面 还 需要 更 精致 的 装扮 ， 如 果 页 面 背景 不 是 白色 的 , 会 不 会 更 美观 ? 
如 果 可 以 使 用 不 同 颜色 的 字体 ， 会 不 会 更 绚丽 ? 带 着 这 样 的 疑问 ， 将 在 第 5 章 的 知识 中 学 习 到 如 何 解 
决 这 些 问 题 。 


4.7 本 章 习 题 


习题 4-1 常用 的 位 图 的 格式 有 了 哪 几 种 ， 分 别 有 什 么 特点 ? 

习题 4-2 在 网 页 中 插入 一 张 名 为 “鲜花 ”的 图 像 ， 效 果 如 图 4.14 所 示 。 

【分 析 】 插 入 图 片 是 图 片 知 识 的 基础 。 需要 注意 的 是 ，<img> 标 签 是 单 标签 , 不 需要 添加 结束 标签 。 
【关键 代码 】 

<img src=" 鲜 花 .jpg" alt=" 鲜 花 "/> 


习题 4-3 在 网 页 中 插入 一 张 背景 图 像 ， 效 果 如 图 4.15 所 示 。 
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图 4.14 在 网 页 中 插入 图 像 图 4.15 插入 背景 图 像 


TML+CSS 网 页 设计 详解 


【分 析 】 使 用 background 属性 可 以 很 轻松 地 插入 背景 图 像 。 
【关键 代码 】 


<body background=" 背 景 图 像 jpg"> 


<h2> 这 里 插入 了 一 张 背景 图 像 </h2> 
</lbody> 


习题 4-4 给 网 页 中 的 图 片 修改 尺寸 , 将 宽度 设置 为 150px, 高 度 设 置 为 200px, 效果 如 图 4.16 
所 示 


【分 析 】 在 <img> 标 签 中 设置 width 和 height 属性 可 以 设置 图 像 的 宽度 和 高 度 。 
【关键 代码 】 


<img src="4.5jpg" width="150" height="200"> 


习题 4-5 ”请 做 出 如 图 4.17 所 示 效 果 ， 这 里 边框 宽度 为 8px， 图片 与 文字 间 的 水 平 、 垂 直 间 距 均 为 


S50px。 
PF mn [- 2 
(| nau-css Pp- c| emssxsomamsm «| 
py 文件 站 ” 蝙 缠 {E) ”要 看 (Vv) 收藏 夫 A) 工具 (T) 者 动 (H) 
(OE TE 图 全 文本 的 E 训 
EEC 
| 图像 的 充 度 和 让 度 | 这 息 文 宇 中 高 四 像 的 水 干 和 生 直 弧 离 部 是 50pr 
“站 该 段 广 守 距离 图 像 的 水 
了 = 
平和 季 直 距 高 部 足 50px- 
ss L 和 aa | 
图 4.16 设置 图 像 宽 度 和 高 度 图 4.17 设置 图 像 和 文本 的 距离 


【分 析 】 首 先 ， 需 要 给 图 片 添加 一 个 宽度 为 8px 的 边框 ; 其次， 由 于 图 片 是 穿插 在 文字 中 的 ， 故 
需要 设置 文字 与 图 片 之 间 的 水 平 、 垂 直 距 离 ， 最 后 ， 将 图 片 的 对 齐 方 式 更 改 为 center 即 可 。 
【关键 代码 】 


<body> 


这 段 文字 距离 图 像 的 水 平和 垂直 距离 都 是 50px。<img src="4.3.jpg" hspace=50 vspace=50 border="8" 
align="center> 这 段 文 字 距 离 图 像 的 水 平和 垂直 距离 都 是 50px。 
</body> 


第 S 章 让 网 页 变 得 更 绚丽 


页 面 设计 中 ， 所 有 的 字体 都 应 该 是 黑色 的 吗 ? 所 有 的 背景 都 应 该 是 白色 的 吗 ? 所 有 的 图 片 都 应 该 
是 方 方 正 正 的 吗 ? 当然 不 是 ， 代 码 语言 规则 是 固定 的 ， 标 签 是 永远 不 会 改变 的 。 但 是 在 语言 代码 的 基 
础 上 ， 设 计 者 花 尽 心思 ， 互 联网 发 展 至 今 以 来 ， 开 发 了 许多 令 人 赞叹 的 视觉 效果 的 页 面 ， 本 章 的 主要 
知识 点 如 下 。 

计算 机 的 颜色 原理 。 

如 何 使 用 颜色 修饰 页 面 。 

了 解 图 像 的 通道 。 

图 像 的 简单 应 用 。 


5.1 了 解 计算 机 语言 下 的 颜色 描述 


颂 M 知 识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 5 章 \ 了 解 计算 机 语言 下 的 颜色 描述 .wmv 

在 计算 机 的 世界 里 ， 每 种 颜色 都 有 自己 的 一 串 数 字 ， 例 如 ， 白 色 是 证 FFFFF， 黑 色 是 #000000， 红 
色 是 狂 F0000， 巧 克 力 色 是 加 D2691E 等 ， 这 串 数字 就 是 表示 颜色 的 颜色 值 。 在 理解 颜色 值 前 ， 首 先 要 明 
白 计 算 机 的 颜色 模式 。 

人 类 的 眼睛 看 到 的 颜色 有 两 类 。 一 类 是 发 光 体 发 出 的 颜色 ， 如 电视 机 荧屏 。 另 一 类 是 物体 本 身 不 
发 光 ， 而 是 反射 光线 产生 的 颜色 。 这 就 很 常见 了 ， 生 活 中 的 大 部 分 物质 都 是 不 发 光 的 ， 如 书本 。 而 对 
于 发 光 体 的 颜色 模式 ， 典 型 的 应 用 便 是 计算 机 屏幕 。 计 算 机 屏幕 上 的 每 一 个 点 都 有 红 、 黄 、 蓝 三 色 的 
荧光 粉 ， 在 电子 枪 的 照射 下 ， 发 出 不 同比 率 的 三 原色 光 ， 相 加 混合 形成 用 户 所 看 到 的 图 像 。 

这 3 种 基本 的 颜色 称 为 “三 原色 ”。 发 光 体 的 颜色 模式 ， 又 称 为 “加 色 模 式 ”， 两 者 相 统一 ， 便 
是 RGB 色彩 模型 。 而 网 页 的 颜色 模式 ， 就 是 这 种 RGB i i 二 


模式 来 确定 的 。R、G、B 3 个 颜色 通道 每 个 都 使 用 8 位 存 semew 


储 器 ， 这 样 每 个 颜色 可 以 有 28， 也 就 是 256 个 层次 。 所 

以 很 多 软件 中 单个 颜色 通道 都 是 用 0 一 255 的 整数 范围 ， 

共 256 个 数 来 表示 的 ，3 个 颜色 通道 加 在 一 起 ， 这 个 色彩 。‖ 男 盏 画 可 画 启 画 广 

模型 一 共 能 表现 1670 万 种 颜色 。 按 照 这 样 的 规律 ， 以 十 | 
| 


六 进 制 来 表示 ，255 相对 于 十 六 进 制 下 的 FF， 然 后 把 3 et be 
个 颜色 值 依次 并 列表 示 出 来 ， 并 以 “#” 开 头 ， 如 图 5.1 ”| ED 二 本 
所 示 是 一 个 图 形 软件 中 常用 的 色 板 。 | 站 

图 中 R=255，G=255，B=255， 即 三 色 颜 色 值 都 为 最 图 51 夫人 
大 时 ， 按 照 三 原色 理论 ， 红 色 、 绿 色 和 蓝 色 加 在 一 起 的 时 候 ， 得 到 的 结果 是 白色 。 同 时 ， 按 照 规律 ，3 
个 数字 依次 都 是 最 大 值 , 全 部 记 做 FF, 串 在 一 起 就 是 性 FFFFF。 如 果 3 个 值 都 为 最 小 值 ,颜色 为 #000000， 


ss 网 页 设计 主人 


意味 着 没有 任何 颜色 ， 这 时 表现 出 来 的 则 是 黑色 。 事 实 上 ， 对 于 设计 者 来 说 ， 由 于 大 部 分 软件 都 可 以 
直观 的 选择 颜色 ， 所 以 并 不 需要 刻意 去 背 熟 不 同色 彩 的 颜色 值 。 


说 明 : 颜色 值 的 表示 中 ， 不 区 分 大 小 写 ， 所 以 手 FFFFF 和 #ffffff 是 一 样 的 ， 都 表示 白色 。 
5.2 让 页 面 绚 丽 多 彩 


第 4 章 中 ， 了 解 到 可 以 使 用 图 像 作为 页 面 背景 来 装饰 网 页 ， 使 之 美观 特别 。 如 果 只 是 改变 页 面 背 
景 颜色 ， 那 是 不 是 需要 放 入 一 大 张 单 色 的 背景 图 片 呢 ? 当然 是 不 需要 的 。HTML 标签 提供 了 可 以 直接 
修改 页 面 背 景色 的 方法 ， 设 计 者 甚至 可 以 使 用 标签 修改 文本 字体 的 颜色 ， 让 页 面 更 丰富 。 


5.2.1 改变 页 面 背 景 颜色 


网 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 5 章 \ 改 变 页 面 背 景 颜色 .wmv 

改变 页 面 背景 颜色 并 不 难 , 只 要 在 <body> 标 签 中 添加 style 属性 , 并 在 style 中 添加 background-color 
属性 来 设置 背景 颜色 即 可 。 其 语法 结构 如 下 : 

<body style="background-color: 颜 色 值 " > 


在 这 句 代 码 中 , 颜色 值 除 了 可 以 用 字母 来 表示 外 , 还 支持 使 用 标准 的 Windows 颜色 名 词 , 有 Black、 
White、Red、Green、Blue、Yellow、Magenta、Cyan、Purple、Gray、Lime、Maroon、Navy、Olive、 
Silver 和 Teal。 当然, 对 于 了 解 如 何 调 色 的 设计 者 来 说 , 完全 可 以 使 用 颜色 值 去 尝试 使 用 自己 定义 颜色 ， 
如 三 F0000 是 红色 。 如 果 设 计 者 希望 得 到 一 种 紫红 色 ， 那 么 便 要 在 红色 里 面 加 上 蓝 色 ， 所 以 数值 表示 
就 成 了 #FFOOFF。 


技巧 : 如 果 和 希望 用 更 直接 的 方法 ， 可 以 直接 在 属性 中 输入 颜色 名 词 。 
【实例 5-1】 本 实例 中 设置 页 面 背 景 颜色 为 黑 绿 色 。 


re 实例 5-1: 设置 页 面 背景 颜色 为 墨绿 色 
源码 路 径 : 光盘 \ 源 文件 ,0S\S-1.html 


<head> 
<title> 设置 背景 颜色 </title> 

</head> 

<body style="background-color:teal"> <!- 设 置 页 面 背景 颜色 --> 
<h5> 
<br><br><br> 背 景 颜色 的 设置 ， 这 是 墨绿 色 </h5> 

</body> 

</html> 


【运行 程序 】 最 终 显示 在 浏览 器 中 的 效果 如 图 5.2 所 示 。 
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图 52 背景 关 色 的 设置 
5.2.2 ”改变 页 面 文本 字体 颜色 


侣 4 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 5 章 \ 改 变 页 面 文本 字体 颜色 .wmv 
修改 页 面 文本 的 颜色 ， 直 接 在 结构 性 标签 中 添加 颜色 属性 color 就 可 以 了 ， 其 写法 如 下 : 
<body style="color: 颜 色 值 "> 

或 者 也 可 以 写 为 : 

<p style="color: 颜 色 值 "> 


【实例 5-2】 本 实例 中 展示 了 不 同 颜色 名 词 下 的 文本 颜色 。 


re 实例 5-2: 展示 不 同 颜色 名 词 下 的 文本 颜色 
源码 路 径 : 光盘 \ 源 文件 ,05\5-2.html 


| 

区 <head> 

3 <title> 文 本 颜色 </title> 

4 </head> 

5 <body> 

6 ”<p style="color:red"> 这 是 使 用 Red 的 文本 

<p style="color:green"> 这 是 使 用 Green 的 文本 
8 <p style="color:blue"> 这 是 使 用 Blue 的 文本 

9 <p style="color:yellow"> 这 是 使 用 Yellow 的 文本 
10 <p style="color:magenta"> 这 是 使 用 Magenta 的 文本 
11 <p style="color:cyan"> 这 是 使 用 Cyan 的 文本 
12 <p style="color:purple"> 这 是 使 用 Purple 的 文本 
13 <p style="color:gray"> 这 是 使 用 Gray 的 文本 

14 <p style="color:lime"> 这 是 使 用 Lime 的 文本 

15 <p style="color:maroon"> 这 是 使 用 Maroon 的 文本 
16 <p style="color:navy"> 这 是 使 用 Navy 的 文本 

lt <p style="color:olive"> 这 是 使 用 Olive 的 文本 

18 <p style="color:silver"> 这 是 使 用 Silver 的 文本 
19 <p style="colorteal"> 这 是 使 用 Teal 的 文本 

20 </body> 

21 </html> 


【运行 程序 】 在 浏览 器 中 的 显示 效果 如 图 5.3 所 示 。 
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这 是 使 用 Navy 的 文本 
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| 这 是 使 用 Teal 的 文本 


及 1D0x ~ 
图 5.3 文本 的 颜色 


【深入 学 习 】 这 个 页 面 展示 了 Windows 标准 颜色 名 词 的 显示 效果 。 但是， 从 设计 页 面 的 角度 来 说 ， 
这 里 有 个 技巧 ， 即 一 个 页 面 中 使 用 的 颜色 最 好 不 要 超过 4 种 颜色 ,设计 文本 时 ， 通 常情 况 下 就 更 不 必 
用 过 多 颜色 。 
注意 : 颜色 是 一 种 语言 ， 它 更 深层 次 的 作用 是 传递 页 面 的 信息 ， 如 橙色 、 黄 色 显 得 活泼 ; 红色 显得 有 
激情 ; 绿色 代表 了 健康 祥和 ; 蓝 色 代 表 了 稳重 内 化 平静 等 。 用 错 颜 色 有 时 候 也 会 表 错 意 。 


5.3 不 寻常 的 图 像 应 用 


在 页 面 中 放 入 的 图 像 文 件 大 部 分 为 JPEG、GIF 和 PNG。JPEG 图 像 就 如 生活 中 看 到 的 照片 一 样 ， 
没有 什么 特别 之 处 ， 但 计算 机 中 的 图 像 具 有 一 些 不 同 于 照片 的 特性 。 如 GIF 图 像 和 PNG 图 像 就 有 一 些 
特殊 的 效果 : GIF 图 像 可 以 制作 成 简单 的 动画 ， 而 PNG 图 像 带 有 透明 通道 ， 可 以 制作 透明 图 像 。 


5.3.1 会 动 的 GIF 图 像 


鳃 和 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 5 章 \ 会 动 的 GIF 图 像 .wmv 
GIF 图 像 可 以 用 来 制 成 逐 帧 动画 ， 逐 帧 动画 就 是 指 将 一 幅 幅 图 像 ， 在 时 间 帧 上 依次 绘制 。 如 早年 
的 动画 片 制作 一 样 。 动 画 和 图 像 相 比 ， 其 最 大 的 优势 是 能 够 表现 一 个 具体 动作 ， 传 递 给 浏览 者 不 一 样 
的 信息 。GIF 动画 也 是 占用 空间 最 小 的 一 种 动画 ， 所 以 在 页 面 中 得 到 广泛 应 用 。 实 例 5-3 即 为 在 页 面 中 
放 入 的 是 一 个 GIF 动画 。 
【实例 5-3】 本 实例 中 介绍 了 使 用 GIF 动画 点 缀 页 面 的 方法 。 


@ 


图 实例 5-3: 使 用 GIF 动画 点 缀 页 面 的 方法 
源码 路 径 : 光盘 \ 源 文件 \05\5-3.html 


<head> 
<title> 使 用 GIF 动画 文件 </title> 
</head> 
<body> 
<h3> 会 动 的 图 像 </h3> 
<img src=" 小 狗 .gif> <!-- 这 里 放 入 GIF 动画 -> 
</body> 
</html> 


【运行 程序 】 在 浏览 器 中 显示 的 效果 如 图 5.4 所 示 。 
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会 动 的 图 像 


图 5.4 使 用 GIF 动画 
【深入 学 习 】 当 在 浏览 器 中 查看 这 个 页 面 时 ， 完 物 狗 会 用 眼睛 ， 摆 动 它 可 爱 的 尾巴 ， 这 是 因为 放 
入 的 是 GIF 动画 的 图 像 ， 这 和 HTML 放 入 图 像 的 方法 没有 区 别 。 页 面 中 还 有 一 种 常用 的 动画 文件 一 一 
Flash。Flash 不 仅仅 能 实现 会 动 的 图 像 ， 而 且 能 制作 出 交互 式 的 动画 效果 。 使 用 Flash 能 制作 出 更 丰富 
的 效果 ， 可 以 表达 时 间 更 长 的 动画 等 。 
说 明 : Flash 的 内 容 将 会 在 第 15 章 中 介绍 。 


5.3.2 图像 的 透明 通道 


爸 4 知识 点 讲解 ， 光 盘 \ 视 频 讲解 \ 第 5 章 \ 图 像 的 透明 通道 .wmv 

了 解 图 像 的 透明 通道 之 前 ,首先 要 理解 图 层 的 概念 。 计算 机 中 的 图 像 并 不 是 像 生活 中 的 照片 一 样 ， 
拿 在 手中 就 是 薄 薄 的 一 层 纸 。 试 想 ， 如 果 把 两 张 照 片 又 加 在 一 起 ， 只 能 看 到 最 上 面 的 那 张 照片 ， 但 如 
果 最 上 面 的 照片 是 透明 的 ， 就 能 完全 看 到 下 层 照片 的 内 容 ， 如 果 上 面 的 照片 是 半 透 明 的， 那么 下 层 的 
照片 就 可 以 若隐若现 。 在 计算 机 中 ， 设 计 者 制作 图 像 时 ， 就 是 使 用 这 样 的 一 种 思路 来 制作 图 像 。 很 多 
格式 的 图 像 都 具有 透明 通道 ， 如 PNG、BMP 和 TGA 等。 如 图 5.5 所 示 是 一 个 橙色 背景 的 网 页 。 如 


区 


图 5.6 所 示 分 别 是 具有 相同 内 容 、 不 同 格式 的 图 像 ， 图 像 格式 分 别 JPEG 和 PNG。 
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cake.jpg cake.png 
图 5.5 橙色 背景 图 5.6 图 像 不 同 格式 的 对 比 


通过 肉眼 几乎 很 难 区 分 JPEG 图 像 和 PNG 图 像 ， 如 果 仔细 观察 ， 可 以 发 现 PNG 图 像 的 背景 色 稍 
微 偏 灰色 一 些 。 接 下 来 ， 将 图 5.6 中 的 两 幅 不 同 格式 的 cake 图 像 放 入 图 5.5 的 橙色 背景 页 面 中 ， 如 实 
例 5-4 所 示 。 

【实例 5-4】 对 比 JPEG 图 像 和 PNG 图像， 其 源码 展示 如 下 。 


区 实例 5-4: 对 比 JPEG 图 像 和 PNG 图 像 
源码 路 径 : 光盘 \ 源 文件 \05\5-4.html 


1 -<html> 

4 <head> 

3 <title> 对 比 PNG 和 JPEG 图 像 </title> 

4 </head> 

5 <body style="background-color:#fcc00"> <!-- 设 置 背 景 颜 色 --> 

6 <img src=" cake.jpg"> < 上 -分 别 放 入 不 同 格式 的 图 像 -> 

x <img src=" cake.png"> <!- 分 别 放 入 不 同 格式 的 图 像 -> 

8 </body> 

9 </html> 
【运行 程序 】 最 终 在 浏览 器 中 的 显示 效果 如 图 5.7 所 示 。 要 i 而 
【深入 学 习 】 通 过 比较 ， 发 现 JPEG 图 像 的 背景 依然 是 白色 ， ET 


而 PNG 图像 的 背景 已 经 消失 了 ， 露 出 了 网 页 背景 的 颜色 ， 这 就 是 
透明 通道 作用 下 的 效果 。 利 用 PNG 图 像 的 这 种 特性 ， 页 面 设计 中 
的 图 像 便 不 再 局 限于 看 上 去 是 个 矩形 ， 图 像 显得 自然 生动 。 

那 究竟 什么 是 透明 通道 ? 从 原理 上 来 说 ， 颜 色 由 基本 三 原色 
构成 ， 所 以 计算 机 中 图 像 具 备 3 个 基本 通道 ， 即 红色 通道 、 绿 色 | 0 
通道 和 蓝 色 通道 。 图 像 如 同 是 由 三 原色 的 图 层 登 加 而 成 ， 此 外 ， 。 图 57 对 比 JPEG 图 像 和 PNG 图 像 
在 此 基础 上 再 加 上 一 个 透明 通道 来 控制 图 像 的 透明 度 。 
技巧 : 透明 通道 又 称 为 Alpha 通 道 ， 是 一 个 8 位 的 灰 度 通道 ， 该 通道 用 256 级 灰 度 来 记录 图 像 中 的 透明 度 

信息 。 所 以 ，PNG 图 像 是 带 有 透明 通道 的 ， 而 JPEG 图 像 不 带 有 透明 通道 。 
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5.3.3” 带 有 透明 通道 图 像 的 应 用 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 5 章 \ 带 有 透明 通道 图 像 的 应 用 .wmv 

因为 PNG 图 像 可 以 保留 透明 通道 ， 图 像 放 在 页 面 中 不 会 出 现 白 
色 边 缘 ， 所 以 如 果 在 已 有 背景 颜色 的 页 面 上 再 添加 背景 图 像 时 ， 就 可 
以 使 图 像 和 背景 色 很 好 地 融合 。 这 样 对 于 设计 者 来 说 ， 可 以 作为 背景 
的 素材 就 大 大 增多 了 。 

此 外 ， 由 于 透明 通道 可 以 控制 图 像 的 透明 度 ， 当 图 像 设置 一 定数 
值 的 透明 度 时 ， 可 以 使 背景 图 像 若隐若现 地 表现 出 来 ， 如 阴影 效果 。 
如 图 5.8 所 示 是 一 张 画面 内 容 为 一 棵 树 的 图 像 ， 这 里 分 别 使 用 JPEG 
和 PNG 格式 来 制作 页 面 背景 。 实 例 5-5 将 这 张 图 像 设置 为 页 面 背 景 。 

【实例 5-5】 本 实例 中 同时 使 用 了 背景 图 像 和 背景 颜色 。 


re 实例 5-5: 在 网 页 中 同时 使 用 背景 图 像 和 背景 颜色 
源码 路 径 : 光盘 \ 源 文件 \05\5-5.html 


<head> 
<title> 同 时 使 用 背景 图 像 和 背景 颜色 的 效果 </title> 
</head> 
<body bgcolor="#99CC33" <!-- 设 置 页 面 背 景 颜色 --> 
background=" 树 .png"> <!-- 设 置 页 面 背景 图 像 让 
</body> 
</html> 


说 明 : 例子 中 使 用 的 是 PNG 图 像 ， 使 用 JPEG 图 像 时 ， 更改 图 片 格式 就 可 以 了 。 
【运行 程序 】 这 个 页 面 最 终 的 效果 如 图 5.9 所 示 。 
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PNG 图 像 页 面 背景 JPEG 图 像 页 面 背景 
图 5.9 不 同 格式 图 像 配合 背景 颜色 的 效果 


[LtCSS 网 页 设计 详解 


【深入 学 习 】 第 5 名 代码 中 的 如 9cc33， 说 明 使 用 了 绿色 的 背景 颜色 。 而 从 图 5.9 中 的 对 比 可 以 发 
现 ，JPEG 图 像 作为 背景 图 像 时 ， 带 有 白色 背景 的 “ 树 ” 图 像 会 覆盖 后 面 的 背景 色 。 

阴影 效果 是 其 中 最 典型 、 最 常见 的 一 种 用 法 。 在 页 面 中 ， 为 了 突出 文字 标题 ， 如 导航 栏 、 目 录 栏 
等 ， 通 常设 计 者 会 将 文字 转换 成 PNG 图 像 ， 应 用 不 同 的 效果 ， 如 添加 阴影 、 发 光 边 缘 ， 使 之 成 为 页 面 
的 焦点 。 如 图 5.10 所 示 为 已 经 做 好 阴影 的 图 像 。 

图 中 “阴影 效果 ”图 层 背 景 的 棋盘 格 是 Photoshop 中 表示 空白 图 层 的 特定 效果 。 所 以 ， 图 像 中 的 内 
容 实际 上 只 有 4 个 字 和 字体 所 带 有 的 阴影 部 分 。 而 阴影 在 图 像 中 是 一 种 半 透 明 状 态 ， 意 味 着 可 以 透 过 
阴影 图 像 看 到 后 面 的 图 层 ， 在 页 面 中 ， 后 面 的 图 层 就 是 页 面 的 背景 色 。 实 例 5-6 中 实现 了 将 这 张 图 像 
放 入 页 面 中 。 


说 明 : 空白 图 层 是 指 没有 任何 内 容 ， 包 括 白色 背景 的 图 层 。 
【实例 5-6】 本 实例 设置 阴影 效果 并 配合 页 面 背景 色 。 


re 实例 5-6: 设置 阴影 效果 并 配合 页 面 背 景色 
源码 路 径 : 光盘 \ 源 文件 \05\5-6.html 


<head> 
<title> 阴 影 效 果 配 合 页 面 背 景色 </title> 
</head> 
<body bgcolor="#99CC33"> <!- 设 置 好 页 面 的 背景 色 --> 
<img src=" 阴 影 效 果 .png"> <!-- 放 入 图 像 --> 
</body> 
</html> 


【运行 程序 】 最 终 在 页 面 中 显示 效果 如 图 5.11 所 示 。 
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图 5.10 阴影 效果 图 5.11 页 面 中 阴影 效果 


【深入 学 习 】 在 页 面 中 ， 配 合 背 景色 或 背景 图 像 时 ， 漂 亮 的 效果 就 被 呈现 出 来 。 所 以 在 页 面 中 ， 
有 些 文 本 的 内 容 ， 其 中 相当 一 部 分 都 是 以 图 像 的 形式 展示 出 来 ， 可 利用 PNG 图 像 的 透明 通道 来 添加 这 
样 的 效果 。 当 然 ， 阴 影 效 果 只 是 其 中 一 种 ， 有 兴趣 的 读者 可 以 充分 发 挥 创作 想象 ， 在 页 面 中 实现 更 有 
趣 的 效果 。 


第 5 章 让 网 页 变 得 更 的 二 


5.4 案例 : 修饰 普通 页 面 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 5 章 \ 案 例 : 修饰 普通 页 面 .wmv 

在 第 4 章 最 后 小 节 的 实例 中 ， 制 作 了 一 个 普通 的 描述 宠物 的 页 面 。 在 本 章 中 ， 将 实践 如 何 将 这 个 
普通 页 面 修饰 得 更 加 漂亮 。 在 这 个 案例 中 ， 首 先 将 给 宠物 页 面 改 成 页 面 背景 ， 同 时 为 了 进一步 美观 ， 
将 文本 标题 Jenny 转换 成 PNG 图 像 ， 这 样 设计 者 可 以 赋予 标题 更 多 的 设计 ， 如 实例 5-7 可 将 这 些 设计 
的 想法 转化 成 代码 。 

【实例 5-7】 本 实例 中 进一步 修饰 了 宠物 页 面 。 

区 -ey | 和 

源码 路 径 : 光盘 \ 源 文件 \05\5-7.html 


1 <!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

岛 <html xmlns="http://www.w3.org/1999/xhtml"> 

4 <head> 

5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6 <title> 进 一 步 修 饰 宠物 页 面 </title> 

网 </head> 

8 <body background=" 背 景 图 像 jpg"> 

9 <!- 设 置 页 面 背景 -> 

10 <p><img src=" banner.jpg" width="1017" height="24" /></p> 

11 <!- 插 入 页 面 BANNER --> 

有 <p><img src=" jenny.png"> 

13 <!-- 插 入 页 面 图 像 一 > 

14 <p><img src=" 小 狗 .gif" width="192" height="262" border="2" align="right" 
15 /></p> 

16 <!- 插 入 页 面 图 像 --> 

他 <p> 年 龄 : 24<br/> 

18 最 喜爱 的 食物 : 小 虾 、 肉 <br/> 

19 特点 : 很 安静 </p> 

20 <p><hr align="left" width="400" size="3" > 

2 <p> <h3 style="color:red">&nbsp; 更 新 宠物 日 记 </h3> 

22 <hr align="left" width="400" size="3" > 

23 <p>2008 年 9 月 1 号 </p> 

24 <p>&nbsp; 外 面 的 天 气 还 是 很 热 ， 所 以 Jenny 一 直 都 懒 懒 的 趴 在 那里 ， 好 久 也 <br> 不 


25 ”愿意 动 一 下 ， 当 然 ， 看 到 好 吃 的 食物 时 候 还 是 会 激动 那么 一 下 的 ，<br>Jenny 很 聪明 ， 看 到 主 
26 ”人 来 了 ， 就 会 探 出 脑袋 ， 一 直上 采 着 你 。 <br /> 

2 </lbody> 

28 </html> 


【运行 程序 】 浏 览 该 页 面 ， 运 行 的 效果 如 图 5.12 所 示 。 


图 5.12 进一步 修饰 宠物 页 面 


【深入 学 习 】 第 8 行 代码 中 添加 了 背景 图 像 ， 第 10 行将 原先 的 Jenny 文本 换 成 了 一 个 PNG 图 像 ， 
在 页 面 中 显得 更 加 醒目 。 在 第 21 行 中 ， 将 文本 修饰 为 红色 ， 以 达到 吸引 注意 力 的 作用 。 虽 然 是 小 小 的 
改动 ， 但 是 在 页 面 中 显示 出 来 却 是 大 大 的 改观 ， 页 面 的 最 终 效 果 如 图 5.12 所 示 。 


技巧 : 好 的 网 页 颜色 的 搭配 也 很 重要 。 
$5.5 外 结 


本 章 的 知识 是 基于 第 4 章 图 像 的 运用 之 上 ， 计 算 机 世界 中 的 图 像 是 有 别 于 现实 图 像 的 。 本 章 的 内 
容 主要 就 是 针对 这 些 不 同 之 处 ， 如 何在 页 面 中 充分 发 挥 计算 机 图 像 的 作用 。 本 章 给 出 了 一 些 重 要 的 图 
像 基础 知识 ， 主 要 的 知识 点 有 : 

计算 机 中 颜色 数量 有 限 ， 不 同 颜色 值 描述 不 同 的 颜色 。 

改变 页 面 背景 色 。 

修改 文本 颜色 。 

GIF 图 像 的 动画 效果 。 

用 PNG 图 像 的 透明 通道 来 展示 阴影 效果 。 

在 第 6 章 中 ， 将 介绍 网 页 的 链接 ， 网 页 之 所 以 能 够 成 为 网 站 ， 就 是 因为 有 许多 的 页 面 链接 在 一 起 ， 
这 也 是 网 页 独特 魅力 的 地 方 。 


5.6 本 章 习 题 


习题 5-1 RGB 色彩 模型 是 由 哪 几 种 颜色 组 成 的 ? 
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习题 5-2 ”将 网 页 的 背景 颜色 设置 为 蓝 色 ， 效 果 如 图 5.13 所 示 。 
【分 析 】 使 用 background-color 来 设置 背景 颜色 。 
【关键 代码 】 


<body style="background-color#0FF"> 


习题 5-3 ”在 习题 5-2 的 基础 上 ， 将 网 页 中 文字 颜色 设置 为 玫 红 色 ， 效 果 如 图 5.14 所 示 。 
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i100% - | 各 100% ~ 
图 5.13 设置 背景 颜色 图 5.14 设置 文本 颜色 

【分 析 】 使 用 color 来 设置 文本 颜色 。 

【关键 代码 】 
<h1 style="color#F6C"> 

背景 颜色 为 蓝 色 

</h1> 

习题 5-4 ”在 页 面 中 插入 一 个 GIF 格式 的 图 像 ， 效 果 如 图 5.15 所 示 。 
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GIF 格式 图 像 和 


图 5.15 插入 GIF 格式 图 像 
【分 析 】 首 先 在 网 上 下 载 一 张 GIF 格式 的 图 像 ， 然 后 像 插 入 普通 图 像 一 样 使 用 <img> 来 插入 GIF 


格式 图 像 。 
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【关键 代码 】 
<img src= "小 猫 跳舞 .gf' > 


习题 5-5 ”在 紫色 的 背景 下 插入 一 张 PNG 格式 的 图 像 ， 效 果 如 图 5.16 所 示 。 
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图 5.16 插入 PNG 格式 图 像 
【关键 代码 】 
<body body bgcolor="#6666CC"> 


<img src=" 雪 人 .png"> 
</body> 


第 6 章 页 面 链 接 


一 个 完整 的 网 站 ， 就 是 将 许多 页 面 链接 在 一 起 ， 用 户 通过 网 站 的 主页 查找 网 站 中 所 有 页 面 ， 而 网 
页 彼此 之 间 的 链接 ， 则 称 为 页 面 的 链接 。 这 就 像 看 书 时 通过 目录 找到 所 需 资料 所 在 的 页 数 ， 然 后 根据 
所 在 页 数 翻 找到 此 页 。 而 在 网 站 中 ， 用 户 在 页 面 中 选择 链接 内 容 ， 页 面 则 会 自动 跳 转 到 所 在 的 页 面 。 
本 章 的 主要 知识 点 如 下 : 

理解 页 面 链接 。 

学 习 基本 的 链接 形式 。 

学 习 如 何 修饰 链接 的 状态 。 

了 解 特殊 形式 的 链接 。 


6.1 何 为 页 面 链接 


所 谓 页 面 链接 ， 是 指 从 一 个 页 面 指向 一 个 目标 的 链接 关系 ， 该 目标 是 多 种 样式 的 ， 可 以 是 一 个 网 
页 ， 也 可 以 是 相同 网 页 的 不 同位 置 ， 甚 至 可 以 是 一 张 图 片 、 一 个 电子 邮件 地 址 或 是 一 个 应 用 程序 。 当 
用 户 单 击 已 经 添加 链接 的 页 面 内 容 时 ， 链 接 目标 将 显示 在 浏览 器 上 ， 并 根据 目标 的 类 型 来 运行 。 

可 以 说 , 在 一 个 大 型 网 站 中 ,网 页 的 链接 已 经 充斥 着 网 站 中 的 每 个 角落 ,如 图 6.1 所 示 即 为 一 家 门 
户 网 站 的 主页 。 在 该 主页 中 ， 每 一 行文 本 、 每 一 张 图 片 ， 几 乎 所 有 的 页 面 内 容 都 是 页 面 链接 。 
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图 6.1 网 站 主页 
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6.1.1 初 识 页 面 链接 


兢 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 初 识 页 面 链接 .wmv 
在 HTML 文档 中 ， 使 用 <a> 标 签 指引 页 面 中 链接 的 目标 点 ， 让 设计 者 创建 指向 目标 点 的 链接 。 在 
链接 的 属性 中 ， 代 码 的 写法 为 : 


<a href= 链接 对 象 的 路 径 "> 链 接 锚 点 对 象 


</a> 


其 中 ，a 源 自 于 英文 中 的 anchor， 用 来 表示 锚 点 : href 属性 的 意思 是 超 文本 引用 ， 该 属性 的 值 指定 
了 链接 的 目标 路 径 。 在 一 个 完整 的 链接 语句 中 包含 两 个 部 分 ， 即 链接 锚 点 对 象 和 链接 地 址 ， 如 实例 
6-1 所 示 是 一 个 简单 的 链接 页 面 ， 实 例 6-2 所 示 是 另 一 个 页 面 。 通 过 链接 的 方法 ， 将 使 实例 6-1 的 A 页 
面 跳 转 到 实例 6-2 的 B 页 面 。 

【实例 6-1】 本 实例 是 页 面 A 中 的 代码 。 


re 实例 6-1: 页 面 A 中 的 代码 
源码 路 径 : 光盘 \ 源 文件 \06\6-1.html 


<head> 
<title> 页 面 A </title> 
</head> 
<body> 
<h1> 页 面 A</h1> 
<h1><a href="B.html"> 页 面 B</a></h1> <!- 链 接 到 页 面 B--> 
</body> 
</html> 


【实例 6-2】 本 实例 是 页 面 B 中 的 代码 。 


OOODND= 


re 实例 6-2: 页 面 B 中 的 代码 
源码 路 径 ， 光 盘 \ 源 文件 066-2 html 


<head> 
<title> 页面 A</title> 
</head> 
<body> 
<h1><a href="A.html"> 页 面 A</a></h1> <|- 链 接 到 页 面 A--> 
<h1> 页 面 B</h1> 
</body> 
</html> 


【运行 程序 】 最 终 在 浏览 器 中 的 效果 如 图 6.2 所 示 。 

【深入 学 习 】 单 击 “ 页 面 B” 时 ,会 跳 转 到 B 页 面 ; 单 击 “ 页 面 A” 时 ,会 跳 转 回 A 页 面 。 在 A、 
B 两 个 页 面 代码 中 ， 页 面 A 代码 中 的 第 7 句 和 页 面 B 代码 中 的 第 6 句 ， 放 入 <a> 标 签 中 的 内 容 便 是 链 
接 的 锚 点 对 象 ， 如 文本 “页 面 A” 和 “页 面 B”。 而 在 <a> 标 签 中 ，href 属性 下 的 内 容 ， 如 Ahtml 和 


@_ 


OONOPOoOD= 


第 6 章 页 面 外 


B.html， 存 放 的 地 址 即 是 链接 的 地 址 ， 这 两 个 元 素 结合 在 一 起 ， 便 完成 了 一 个 链接 过 程 。 


Ga 司 FHTML+Css+k 记 Qs 间 FNSHTML+Css+k 记 
文本 有 ”我 (E) 可 EV) 妆 二 关 | XHN RE) EEV Ku,” 


页 面 A 


页 面 A 页 面 B 
图 6.2 页 面 链 接 


6.1.2 理解 链接 地 址 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 理 解 链接 地 址 -wmv 

链接 地 址 指 的 是 链接 到 锚 点 对 象 的 路 径 ， 这 个 路 径 所 指 的 不 仅仅 是 一 个 页 面 地 址 ， 也 可 能 是 一 个 
文件 地 址 或 一 个 邮箱 地 址 。 那 么 ， 对 于 一 个 页 面 的 链接 ， 该 如 何 去 定 位 链接 对 象 的 路 径 呢 ? 实例 6-3 
是 通过 一 个 链接 地 址 跳 转 到 了 另 一 个 页 面 ， 效 果 如 图 6.3 所 示 。 

【实例 6-3】 本 实例 是 通过 一 个 链接 地 址 跳 转 到 另 一 个 页 面 。 


re 实例 6-3: 通过 一 个 链接 地 址 跳 转 到 另 一 个 页 面 
源码 路 径 : 光盘 \ 源 文件 ,06\6-3.html 


1 

4 <head> 

3 <title> 链 接 内 容 的 路 径 </title> 

4 </head> 

5 <body> 

6 ”<h1> 链 接 内 容 的 路 径 </h1> 

7 ”<h1><a href=" 图 片 /时 间 表 .jpg "> 时 间 表 <!- 图 像 即 是 链接 的 目标 -> 
8 </a></h1> 

9 


【运行 程序 】 浏 览 该 页 面 ， 运 行 的 效果 如 图 6.3 所 示 。 
Ge | 
文件 | 3 RE 
链接 内 容 的 路 径 


10% > ll 或 100% ~ 


6.3 ”链接 内 容 的 路 径 


LtCSS 网 页 设计 详解 


【深入 学 习 】 单 击 “ 时 间 表 ”时 ， 页 面 即 跳 转 到 图 片 ， 而 图 片 则 显示 在 新 的 页 面 中 。 在 该 实例 中 ， 
从 图 6.3 中 的 浏览 器 地 址 栏 可 以 看 出 ， 以 .html 为 后 缀 的 页 面 文件 6-3.html 放 在 名 为 “示例 ”的 文件 夹 
下 ， 而 页 面 链接 的 内 容 ， 即 JPEG 文件 “时 间 表 .jpg” 放 在 “图 片 ”文件 夹 中 ， 而 “图 片 ”文件 夹 又 是 
放 在 “资料 光盘 ”文件 夹 下 ， 因 而 页 面 文件 和 “图 片 ”文件 夹 属于 同一 目录 。 这 样 层 层 递 推 的 关系 可 


议 27 列 


6.4 ”页 面 文件 和 图 像 文件 夹 


在 代码 中 定义 链接 对 象 的 路 径 时 ， 有 这 样 一 个 规律 : 所 链接 的 内 容 ， 如 实例 6-3 中 “时 间 表 .jpg”， 
从 和 页 面 文件 同一 目录 下 的 文件 夹 起 开始 定义 ， 如 “6-3.html” 是 页 面 文件 ， 而 “图 片 ” 文 件 夹 和 页 面 
文件 属于 同一 目录 。 为 了 正确 引用 图 像 的 路 径 ， 代 码 第 7 句 中 定义 图 像 的 路 径 ， 就 需要 从 “图 片 ” 文 


件 夹 这 个 位 置 开 始 定义 。 


注意 : 如 果 将 页 面 文件 6-3.html 放 在 F 盘 中 ， 那 么 链接 地 址 的 路 径 就 应 该 改 为 “<a hre 全 "示例 /图 片 /时 间 


表 jpg">”。 


6.2 ”链接 的 基本 知识 


链接 的 分 类 不 同 ， 使 用 的 方法 却 是 大 同 小 异 ， 创 建 一 个 超 链接 很 容易 。 事 实 上 ， 设 计 者 用 到 的 只 
有 一 个 <a> 标 签 而 已 。 虽 然 链接 的 方法 类 似 ， 但 是 其 展示 的 形式 却 自由 多 变 ， 如 链接 的 方式 、 链 接 指向 


何 处 等 。 从 使 用 者 的 角度 来 说 ， 设 计 者 最 重要 的 是 保持 链接 的 友好 性 。 
6.2.1 基本 的 文本 链接 
鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 基 本 的 文本 链接 .wmv 


文本 链接 是 页 面 中 最 常见 的 链接 形式 ， 也 是 最 基本 的 一 种 链接 。 一 般 文本 链接 中 ， 最 初 超 链接 文 
字 呈 蓝 色 ， 文 字 下 面 有 一 条 下 划 线 ， 如 果 超 链接 已 经 被 浏览 过 ， 文 本 颜色 就 会 发 生 改变 ， 默 认 是 紫色 。 


注意 : 设置 文本 链接 时 ， 在 文本 的 段落 中 直接 使 用 <a> 标 签 。 
【实例 6-4】 本 实例 中 设置 了 一 个 文本 链接 。 


© 


图 实例 6-4: 设置 一 个 文本 链接 
源码 路 径 : 光盘 \ 源 文件 066-4html 


1 

了 <head> 

3 <title> 蝙 蝠 侠 之 黑暗 骑士 </title> 

一 </head> 

5 <body> 

6 <h3> 影 片 《蝙蝠 侠 之 黑暗 骑士 崛起 》</h3> 

区 本 片 是 克里斯托弗 ， 诺 兰 执导 的 “蝙蝠 侠 ” 系 列 三 部 曲 的 最 终 章 。 前 两 部 分 别 是 2005 
8 年 的 《蝙蝠 侠 : 侠 影 之 谜 》 和 2008 年 的 《蝙蝠 侠 : 黑暗 骑士 1》。 此 片 为 2008 年 暑期 上 
9 ”了 映 的 美国 大 片 <a href= "黑暗 骑士 .html">《 蝙 蝠 侠 : 黑暗 骑士 》</a> 的 续集 ， 主 演 和 导演 
10 ”等 仍 是 原 班 人 马 ， 并 且 新 增 了 只 存在 于 漫画 、 动 画 版 中 的 人 物 : 贝 恩 Bane (汤姆 哈 迪 

11 ” 饰 ) ， 猫 女 Selina Kyle (安妮 ' 海 瑟 薇 饰 ) 等 等 。 


公 <!--“《 蝙 蝠 侠 : 黑暗 骑士 》” 是 链接 的 位 置 --> 
13 </body> 
14 </html> 


【运行 程序 】 运 行 结果 如 图 6.5 所 示 ， 将 链接 的 锚 点 对 象 放 入 <a> 标 签 内 就 可 以 完成 链接 ， 当 单 击 


文本 “《 蝙 蝠 侠 ， 黑暗 骑 士 》” 时 ， 页 面 跳 转 到 链接 的 页 面 。 
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图 6.5 文本 链接 
6.2.2 ”基本 的 图 像 链接 
鳃 8 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 6 章 \ 基 本 的 图 像 链接 .wmv 


图 像 链接 的 使 用 频率 和 文本 链接 一 样 高， 设置 图 像 链接 的 方法 和 文本 链接 相同 ， 在 引 记 
码 前 面 放 入 <a> 标 签 即 可 。 代 码 如 下 : 


<a href="..."> 
<img src="..."> 
</a> 


【实例 6-5】 本 实例 介绍 了 设置 图 像 链接 的 方法 。 


re 实例 6-5: 设置 图 像 链 接 的 方法 
源码 路 径 : 光盘 \ 源 文件 \06\6-5.html 


图 片 的 代 
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<html> 
<head> 
<title> 图 像 的 链接 </title> 
</head> 


<h3> 图 像 的 链接 </h3> 
<a href=" 苏 轼 简介 .html"> <!-- 这 里 链接 到 的 目标 页 面 -> 
<img src=" 图 片 /更 部 陈 公 诗 践 .jpg"> ”<!-- 这 张 图 像 是 链接 的 位 置 --> 
</a> 
</body> 


ri 


一 口 


【运行 程序 】 浏 览 效果 如 图 6.6 所 示 。 
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图 6.6 图 像 的 链接 


【深入 学 习 】 代 码 中 第 7 一 9 行 即 是 对 页 面 文档 调用 的 图 像 设 置 链接 。 依 照 这 种 方法 ， 对 于 设置 
Flash 文件 或 是 引用 其 他 文件 的 链接 都 是 一 样 的 。 

此 外 ， 有 时 使 用 的 图 片 不 是 正规 窃 形 ， 图 像 会 出 现 如 图 6.6 中 所 示 的 边框 。 如 果 想 去 除 边 框 ， 可 以 
在 代码 中 添加 代码 “border=0”， 则 代码 第 8 句 写 为 “<img sre=" 图 片 /更 部 陈 公 诗 跋 jpg" border=0>”。 


说 明 : 使 用 CSS 样 式 表 修饰 图 像 会 是 一 种 更 好 的 方法 。 
6.2.3 邮箱 地 址 链接 


鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 邮 箱 地 址 链接 .wmv 

<a> 标 签 还 可 以 链接 电子 邮箱 地 址 。 这 是 通过 网 页 让 使 用 者 和 设计 者 联系 的 最 方便 的 方法 。 当 然 ， 
也 可 以 直接 在 页 面 中 留 下 电子 邮箱 地 址 ， 但 是 有 时 为 了 突出 友好 性 ， 采 用 将 邮箱 地 址 链接 到 页 面 内 容 
上 的 方式 ， 使 用 方法 如 下 : 


<a href="mailto: 邮 箱 地 址 "> 链接 锚 点 对 象 
</a> 


其 中 ，mailto 是 mail to 的 连 写 ， 意 思 是 “把 邮件 发 送 到 ”。 在 这 行 代码 中 ， 还 可 以 给 新 邮件 填 好 
邮件 的 主题 和 正文 ， 这 样 打开 电子 邮件 程序 时 就 已 经 填 好 了 要 发 送 给 收 信人 的 新 邮件 。 这 通过 属性 
subject 和 body 来 实现 ， 使 用 时 有 些 特别 ， 需 要 放 在 两 个 问号 之 间 ， 如 实例 6-6 所 示 。 
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【实例 6-6】 本 实例 介绍 链接 邮箱 地 址 的 方法 。 


re 实例 6-6: 链接 邮箱 地 址 的 方法 
源码 路 径 : 光盘 \ 源 文件 \06\6-6.html 


<head> 
<title> 邮 箱 的 链接 </title> 
</head> 


<body> 
<h1> 邮 箱 链接 </h1> 
<a href="mailto:huizhao@foxmail.com?subject= 联 系 我 ;body= 告 诉 我 们 你 对 网 
页 设计 的 想法 ?"> 告诉 我 们 你 对 网 页 设计 的 想法 ? 


【运行 程序 】 在 浏览 器 中 的 效果 如 图 6.7 所 示 ， 当 单 击 “告诉 我 们 你 对 网 页 设计 的 想法 ? ” 超 链 接 
时 ， 系 统 会 自动 打开 邮件 客户 端 。 
注意 : 如 有 果 浏览 者 的 系统 没有 安装 邮件 客户 端 ， 会 给 使 用 者 带 来 很 大 麻烦 。 因 此 ， 这 种 使 用 方法 有 时 
也 遭 到 设计 者 的 排斥 。 
| 
i cA \ | = :… 手下 项 。 设 村 二 惟 式 。 市 网 -0 
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图 6.7 邮箱 的 链接 
【深入 学 习 】 互 联网 中 有 很 多 垃圾 邮件 的 制造 者 ， 他 们 创建 电子 邮件 的 数据 库 ， 然 后 给 电子 邮件 
地 址 发 送 大 量 的 垃圾 邮件 。 这 其 中 有 一 种 方法 就 是 使 用 程序 自动 搜索 含有 mailto 的 链接 。 所 以 为 了 防 
止 垃 圾 邮件 ， 有 时 也 把 邮件 地 址 的 英文 字母 转换 成 ASCI 字符 。 如 实例 6-6 的 邮箱 地 址 
huizhao@foxmail.com， 改 动 其 中 一 个 或 部 分 字母 ， 在 ASCII 字符 中 小 写字 母 “a” 的 代码 是 “&#97;”， 
那么 邮件 的 地 址 可 写成 “huizh&#97:o@ foxmail.com”, 这 样 程序 搜索 出 来 的 便 是 乱码 的 电子 邮件 地 址 。 


6.2.4 在 同一 页 面 中 快速 查找 信息 


全 am 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 在 同一 页 面 中 快速 查找 信息 .wmv 
页 面 中 除了 和 页 面 之 外 的 文件 或 者 程序 链接 外 ， 还 可 以 和 同一 页 面 中 的 内 容 进行 链接 。 这 种 情况 
通常 用 于 导航 ， 使 页 面 可 以 直接 跳 转 到 用 户 需 要 的 信息 版 块 上 。 由 于 是 在 同一 页 面 内 实现 链接 ， 也 就 


® 
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是 说 ， 页 面 链接 的 路 径 就 是 在 同一 页 面 内 ， 所 以 在 HIML 语言 中 使 用 <a> 标 签 中 的 id 属性 来 确定 路 径 
位 置 。 通 过 以 下 两 个 步骤 可 以 理解 这 种 代码 的 用 法 。 

(1) 确定 链接 的 锚 点 对 象 ， 不 同 于 页 面 和 外 部 文件 链接 的 方式 在 于 ， 链 接 的 路 径 由 于 在 同一 页 面 
内 ， 需 要 使 用 “# ”来 引用 同一 页 面 中 的 内 容 。 代 码 如 下 : 


<a href=#...> 
</a> 


(2) 在 页 面 中 设 定 链 接 的 目标 ， 使 用 的 就 是 id 属性 。 代 码 如 下 : 


<aid=...> 


说 明 : id 也 可 以 写成 name， 区 别 在 于 name 是 HTML 中 的 标准 ， 而 id 是 XHTML 中 的 标准 。 
id 属性 后 放 入 的 内 容 ， 就 是 第 一 步 中 href 属性 下 设 定好 的 内 容 。 这 样 前 后 呼应 ， 自 然 可 以 容易 地 


找到 位 置 。 
【实例 6-7】 本 实例 介绍 同一 页 面 内 实现 链接 的 方法 ， 单 击 网 页 中 的 标题 ， 就 可 以 跳 转 到 当前 页 面 


的 相应 位 置 。 


1 

2 

3 <title> 同 一 页 面 内 实现 链接 </title> 

4 </head> 

号 <body> 

6 <h2> 世 界 博览 会 </h2> 

区 <a href=# 概 述 > 概述 </a> 

8 <br><a href=# 世 界 博览 会 的 历史 与 由 来 > 世界 博览 会 的 历史 与 由 来 </a> 
9 ”<!-- 设 置 页 面 的 锚 点 链接 一 > 

10 ”<br><a href=# 国 际 博览 局 与 世界 博览 会 > 国际 博览 局 与 世界 博览 会 </a> 
11 ”<!- 设 置 页 面 的 锚 点 链接 一 > 

12 ”<br><a href=# 中 国 与 世界 博览 会 > 中 国 与 世界 博览 会 </a> 

13 ”<!- 设 置 页面 的 锚 点 链接 一 > 


14 <p> 

15 <h3><a id= 概 述 ></a> 概 述 </h3> 

16 < 上 -- 锚 点 的 位 置 一 > 

他 <br>&nbsp;&nbsp: 世 界 博览 会 (World Exhibition or Exposition， 简 称 World Expo) 
18 ”是 一 项 由 主办 国政 府 组 织 或 政府 委托 有 关 部 门 举办 的 有 较 大 影响 和 您 久 历史 的 国际 性 博览 活 

1 二 过 

20 <br>&nbsp;&nbsp; 世 界 展 览 会 的 会 场 不 单 是 展示 技术 和 商品 ， 而 且 伴 以 异彩 纷呈 的 表 
21 ” 演 ， 富 有 魅力 的 壮观 景色 ， 设 置 成 日 常生 活 中 无 法 体验 的 、 充 满 节 日 气氛 的 空间 ， 
-0 

23 <p><h3><a id= 世 界 博 览 会 的 历史 与 由 来 ></a> 世 界 博览 会 的 历史 与 由 来 </h3> 

24 < 上 - 锚 点 的 位 置 一 > 

25 <br>&nbsp;&nbsp; 在 古代 农耕 社会 ， 人 们 往往 在 庆贺 丰收 、 宗 教 仪式 、 欢 度 喜 庆 的 节 
26 ”日 里 展开 交易 活动 ， 后 来 逐渐 发 展 成 为 定期 的 、 有 固定 场所 的 、 以 物品 交换 为 目的 的 大 型 贸易 
7 
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28 <p><h3><a id= 国 际 博览 局 与 世界 博览 会 ></a> 国 际 博 览 局 与 世界 博览 会 </h3> 

29 <!- 锚 点 的 位 置 -> 

30 <br>&nbsp;&nbsp; 举 办 世界 博览 会 的 目的 往往 是 为 庆祝 一 个 重大 的 历史 事件 或 一 个 
31 ”地 区 、 一 个 国家 的 重要 纪念 活动 : 为 了 展示 人 类 在 某 一 或 多 个 领域 中 ， 政 治 、 经 济 、 文 化 、 
32 ”科技 等 方面 

3320 ea 


34 <p><h3><a id= 中 国 与 世界 博览 会 ></a> 中 国 与 世界 博览 会 <h3> 

35 <!- 错 点 的 位 置 -> 

36 <br>&nbsp;&nbsp; 中 国 第 一 次 参加 世界 博览 会 应 该 始 于 1873 年 的 维也纳 世界 博览 
37 会， 中 国 的 参加 方式 也 是 赛 奇 会 本 身 的 一 奇 。 因 为 代表 中 国人 的 是 一 个 思 包 腊 

38 (EoCoBowra) 的 英国 


-0 

40 </body> 

41 </html> 

【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 6.8 所 示 。 
2 一 二 
EECETZCZTCTC7IIIIFTETTTT | |O meeerytae P ~ | 合同 -Km 
普 件 (F) ” 编 卓 F) 。 庆 瑟 (Y) 改 葡 坟 (A) 工 呈 CD。 硕 动 (M) 立 伯 月” 注 申 (F) 宣 硅 (V) 效 列 二 (A) 工 呈 mT 帮助 HH) 
世界 博览 会 ^ 型 贸易 内 
报 达 国际 博览 局 与 世界 博览 会 


| dd Eb ge | 
国家 的 重要 纪念 活 
7 人 


世 轩 情 览 全 的 历 中 与 由 末 
二 
人 

| 

RA (Tope Dhan pe ese 二 


| 曾 休 norld Expo) 是 一 项 由 主 ， 
| 攻关 部 站 办 的 有 权时 i 人 


第 一 次 务 加 世界 博 谢 会 应 该 始 于 187: 和 入 也 
中 国 的 参加 方式 也 是 者 奇 会 本 身 的 : 
中 国人 的 是 一 个 叫 包 腊 (EoCoBowra) | 


不 蛙 是 果 示 技术 和 商品 。 面 且 件 

以 避 彩 维 到 的 到 演 ， 宫 吕 力 的 壮 双 县 色 ， 设 置 成 昌 
市 生活 中 大 法 人 的、 志江 和 日 气 的 全 加 
ia 


图 6.8 同一 页 面 内 的 链接 
【深入 学 习 】 由 于 页 面 较 长 ， 当 单 击 目录 栏 时 ， 页 面 会 跳 到 相应 的 目标 位 置 ， 以 方便 浏览 者 阅读 
页 面 信息 ， 这 是 提高 页 面 友好 性 的 一 个 很 好 的 方法 。 在 该 实例 中 ， 注 意 第 8、10、12 行 和 第 23、28、 
34 行 之 间 的 呼应 。 
单 击 “ 国 际 博览 局 和 世界 博览 会 ”目录 时 ， 页 面 自动 跳 到 “国际 博览 局 和 世界 博览 会 ”内 容 版 块 。 
从 代码 上 看 ， 第 23 行 定义 了 一 个 id 属性 ， 如 同 在 页 面 中 声明 “这 里 是 一 个 目标 位 置 ”， 而 在 第 8 行 
代码 中 设置 了 超 链 接 ， 表 明 链 接 到 第 23 行 的 位 置 。 


6.3 提高 页 面 链接 的 友好 度 


在 设置 了 超 链接 的 文本 中 ， 链 接 的 内 容 都 带 有 下 划 线 ， 浏 览 过 的 字体 也 都 是 特定 的 颜色 ， 给 人 干 
篇 一 律 的 感觉 ， 这 对 于 浏览 者 来 说 ， 是 一 种 不 太 舒 服 的 体验 。 为 了 解决 这 些 问 题 ， 使 页 面 展现 出 亲 和 
力 的 一 面 ， 设 计 者 总 是 会 用 一 些 新 颖 的 方法 去 改变 链接 的 状态 。 
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6.3.1 ”美观 链接 的 状态 


鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 美 观 链接 的 状态 .wmv 

链接 的 状态 在 页 面 中 是 很 显眼 的 一 部 分 ， 起 到 举足轻重 的 作用 ， 而 链接 的 样式 是 可 以 通过 定义 来 
修改 的 。 在 修改 之 前 ， 首 先 要 清楚 链接 的 过 程 。 一 个 链接 状态 ， 可 以 分 解 为 以 下 4 个 步骤 。 

(1) 链接 还 未 被 访问 。 

(2) 链接 被 选中 时 。 

(3) 鼠标 指针 滑 过 链接 。 

(4) 链接 被 访问 后 。 

使 用 HTML 标签 属性 ， 通 过 添加 link、alink 和 vlink 来 修改 超 链接 文本 的 颜色 。link 属性 修改 链接 
未 访问 时 的 文本 颜色 ，alink 属性 修改 链接 被 选中 时 文本 的 颜色 ，vlink 属性 修改 链接 被 访问 后 的 文本 颜 
色 。 实 例 6-8 为 使 用 标签 来 修改 链接 的 文本 颜色 。 

【实例 6-8】 本 实例 介绍 使 用 标签 属性 修改 文本 链接 颜色 的 方法 。 


re 实例 6-8: 使 用 标签 属性 修改 文本 链接 颜色 的 方法 
源码 路 径 : 光盘 \ 源 文件 \06\6-8.html 


<head> 
<title> 使 用 标签 属性 修改 文本 链接 颜色 </title> 
</head> 
<body link=teal alink=red vlink=silver> <!- 设 置 链接 状态 样式 --> 
<h3> 使 用 标签 属性 修改 文本 链接 颜色 </h3> 
<a href=" 后 退 .htmI"> 注 意 文本 颜色 前 后 变化 </a> 
</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 6.9 所 示 ， 链 接 文本 前 后 的 颜色 发 生 了 改变 。 
| I | 
(OOD wr Do| Guess OT ra po| Gems EC 
EUR RE UE ND NBD BV GN IAm ~ 


使 用 标签 属性 修改 文本 链接 颜色 使 用 标签 属性 修改 文 木 链接 颜 色 使 用 标签 属性 修改 文本 链接 闫 色 


Rio0% -| | Bs too -| sa 
图 6.9 使 用 标签 属性 修改 文本 链接 颜色 


说 明 : 当 页 面 被 访问 过 后 ， 再 次 打开 页 面 时 ， 会 发 现 链接 始终 保持 访问 后 的 状态 ， 这 是 因为 浏览 器 记 
录 了 用 户 的 链接 记录 。 如 果 想 删除 记录 信息 ， 可 以 在 浏览 器 中 选择 “工具 ”|“Internet 选 项 ” 命 
令 ， 在 弹出 的 “Internet 选 项 ”对 话 框 中 单 击 “ 清 除 历史 记录 ”按钮 即 可 清除 记录 信息 。 


【深入 学 习 】 这 里 是 使 用 HTML 标签 属性 来 实现 的 功能 ， 事 实 上 这 种 方法 并 不 值得 推荐 ， 更 好 的 
方法 是 使 用 CSS。 除 了 结构 性 的 标签 如 <body>、<p> 无 法 替代 外 ， 在 表现 性 的 作用 上 ， 应 该 习惯 于 避 
免 使 用 标签 属性 的 用 法 。 而 且 CSS 可 以 包含 更 多 的 属性 修改 ， 实 现 自由 度 更 大 的 修饰 。 接 下 来 从 CSS 


局 


中 om、oDm 上 wh 一 
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的 角度 来 了 解 如 何 修改 链接 状态 。 

链接 还 未 被 访问 : 

alink {...} 

链接 被 选中 时 : 

a:active {...} 

鼠标 指针 滑 过 链接 : 

a:hover {...} 

链接 被 访问 后 : 

avisited {...} 

而 在 企 中 通常 添加 两 个 基本 的 属性 : color 属性 修改 文本 的 颜色 ; text-decoration 属性 选择 是 否 显示 
下 划 线 。 比 较 常 见 的 用 法 是 ， 设 置 未 访问 前 的 状态 、 被 访问 后 的 状态 和 鼠标 指针 滑 过 链接 的 状态 。 所 


以 , 一 个 基本 的 使 用 CSS 样式 表 如 实例 6-9 所 示 。 
【实例 6-9】 本 实例 是 使 用 CSS 属性 修改 文本 链接 颜色 。 


re 实例 6-9: 使 用 CSS 属性 修改 文本 链接 颜色 
_ 源码 路 径 : 光盘 \ 源 文件 ,06\6-9.html 


1 <html> 

和 2 <head> 

3 <title> 使 用 CSS 属性 修改 文本 链接 颜色 </title> 

4 <style type=text/css> 

5 a {color:teal; 

6 text-decoration:none /| 链接 的 状态 ， 去 除 链接 的 下 划 线 
时 } 

8 a:visited {color:silver; 

9 text-decoration:none // 被 访问 后 的 链接 状态 
10 } 

uk | a:hover {color:red; 

12 text-decoration:underline // 滑 过 链接 文本 的 样式 
13 1 

14 </style> 

15 </head> 

16 <body> 

17 <h3> 使 用 CSS 属性 修改 文本 链接 颜色 </h3> 

18 <a href=" 后 退 .html"> 注 意 文 本 颜色 前 后 变化 </a> 

19 </body> 

20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 其 效果 如 图 6.10 所 示 ， 单 击 前 的 状态 是 墨绿 色 ， 被 访问 后 变 为 银灰 色 ， 
而 当 链 接 被 选中 时 ， 显 示 的 状态 是 红色 带 有 下 划 线 。 


| 
中 注 章 文 本 颜色 前 后 变化 


生姜 本 二 和 寺 扫 化 
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6.10 使 用 CSS 属性 修改 文本 链接 颜色 


6.3.2 ”特殊 的 链接 方式 


印 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 特 殊 的 链接 方式 .wmv 

6.3.1 节 中 讲解 了 通过 使 用 CSS 的 方法 可 以 去 除 链接 默认 的 下 划 线 。 本 节 将 介绍 两 种 新 方法 来 改变 
下 划 线 的 样式 。 首 先 需 要 了 解 两 个 属性 : border-bottom 属性 和 padding-bottom 属性 。 前 者 的 意思 是 底 
部 边界 ， 后 者 的 意思 是 底部 内 边 。 顾 名 思 义 ， 它 们 都 是 用 来 描述 边框 性 质 的 属性 。 那 么 ， 这 里 的 原理 
就 是 使 用 边框 属性 来 替换 原来 的 下 划 线 。 实 例 6-10 中 展示 了 这 两 个 属性 的 作用 。 

【实例 6-10】 本 实例 使 用 border-bottom 属性 蔡 换 链接 下 划 线 。 


区 : ”实例 6-10: 使 用 border-bottom 属性 蔡 换 链接 下 区 线 
源码 路 径 : 光盘 \ 源 文件 \06\6-10.html 


| 
上 lo0% 


1 
之 <head> 

四 <title> 特 殊 的 链接 方式 </title> 

4 <style type=text/css> 

号 af 

6 text-decoration: none; 

耽 border-bottom: 5px dotted red; /改变 下 划 线 的 样式 
8 } 

9 </style> 

10 </head> 

311 <body> 

1 <h3> 点 状 的 下 划 线 


13 <p><h3><a href=" 后 退 .html"> 使 用 “border-bottom” 属 性 替换 链接 下 划 线 </a> 
14 </body> 
15 </html> 


【运行 程序 】 代 码 中 第 7 行 的 意思 是 “大 小 是 5px 的 点 状 [SEE 

红色 底部 边框 ”。 所 以 不 难 发 现 ， 这 里 是 通过 大 小 、 形 状 和 颜 ee was TaD 

色 来 控制 边框 的 形态 ， 效 果 如 图 6.11 所 示 。 en 
【深入 学 习 ] 这 里 的 dotted 是 点 状 的 意思 , 除 此 之 外 ,CSS | 全 .5 局 后 

中 还 允许 其 他 形状 的 下 划 线 ， 如 dashed (虚线) 、double 〈 双 

线 ) 、groove〔 槽 线 ) 、ridge (次 线 ) 、inset (内 陷 ) 和 outset 

(外 陷 ) ， 有 兴趣 的 读者 可 以 尝试 一 下 。 图 611 点 状 的 下 划 线 


而 padding-bottom 属性 可 以 引用 自 定义 图 像 来 制定 下 划 线 ， 技 巧 在 于 要 设置 好 下 划 线 和 文本 的 距 
离 ， 如 实例 6-11 中 设计 的 自 定义 下 划 线 。 
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re 实例 6-11: 使 用 padding-bottom 属性 替换 链接 下 划 线 
源码 路 径 : 光盘 \ 源 文件 \06\6-11.html 


1 <html> 

2 <head> 

3 <title> 特 殊 的 链接 方式 </title> 

- <style type=text/css> 

5 af 

6 text-decoration: none; // 去 除 下 划 线 

7 padding-bottom: 15px; // 设 置 底 边 边界 的 位 置 
8 background: url( 图 片 / 手 .png) bottom repeat-x; // 营 换 为 自 定义 的 图 像 
9 } 

10 </style> 

11 </head> 

位 <body> 

13 <h3> 使 用 自 定义 图 像 的 下 划 线 

14 <p><h3><a href=" 后 退 .html"> 使 用 “padding-bottom” 属 性 替换 链接 下 划 线 </a> 
15 </body> 

16 </html> 


【运行 程序 】 浏 览 该 页 面 ， 在 浏览 器 中 的 效果 如 图 6.12 所 示 。 
(DE emcs Do 0 | B Hmm 
ET 
使 用 自 定义 图 像 的 下 划 线 


| 使 用 “padding-bortom” 属性 若 换 链接 下 划 线 
ooooboooaoooaoooaooaoaooaaoec 
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图 6.12 使 用 padding-bottom 属性 替换 链接 下 划 线 


注意 : 需要 不 断 调整 图 像 的 位 置 才能 设置 好 下 划 线 ， 但 是 在 不 同 的 浏览 器 中 可 能 会 产生 不 同 的 结果 ， 
所 以 不 建议 这 样 设置 下 划 线 。 


【深入 学 习 】 代 码 第 7 行 中 控制 了 自 定义 的 下 划 线 和 文本 的 距离 ， 该 距离 需要 仔细 控制 ， 如 果 控 
制 不 当 ， 在 页 面 中 会 显示 不 完整 的 图 像 或 者 显示 不 出 自 定义 下 划 线 。 代 码 第 8 行 的 意思 是 “图 像 在 x 
方向 上 重复 的 内 边框 ”， 而 使 用 的 图 像 是 “ 手 .png”。 当 然 ， 在 正规 的 网 页 设计 中 最 好 不 要 这 么 做 ， 因 
为 这 样 会 影响 用 户 体验 。 


6.3.3 ”热点 图 像 区 域 的 链接 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 热 点 图 像 区 域 的 链接 .wmv 
所 谓 图 像 热 点 区 域 ， 就 是 指 一 个 图 像 中 的 某 一 区 域 。 那 么 热点 图 像 区 域 的 链接 ， 自 然 就 是 使 用 这 
一 个 区 域 作为 超 链接 ， 就 好 像 在 一 张 地 图 上 ， 以 其 中 某 一 区 域 作为 超 链接 。 所 以 ， 在 代码 中 也 用 到 一 
个 形象 的 标签 一 一 <map> 标 签 。<map> 标 签 下 ,嵌入 使 用 <area> 标 签 表明 某 一 区 域 ,其 中 有 3 个 属性 值 
来 确定 这 个 区 域 ， 分 别 是 shape、coords 和 href 属性 。 
@ 


shape 属性 : 用 来 确定 选区 的 形状 ， 分 别 是 rect (和 抑 形 )、circle〈 圆 形 ) 和 poly (多 边 形 )。 

coords 属性 : 用 来 控制 形状 的 位 置 ， 通 过 坐标 来 找到 该 位 置 。 一 般 来 说 ， 在 实际 操作 中 ， 设 计 者 
都 会 选择 借助 可 视 化 的 编辑 页 面 的 软件 来 实现 这 一 功能 ， 这 样 就 不 必 在 图 像 上 测算 具体 的 坐 
标 值 。 

href 属性 :就 是 超 链接 。 

所 以 ， 将 这 些 属 性 运用 在 一 起 ， 具 体 代码 写法 为 : 

<map id=...> 
<area shape="..." coords="..." href="..."> 

</map> 

这 里 介绍 一 种 借助 Dreamweaver 软件 来 制作 热点 图 像 链接 的 实例 。Dreamweaver 的 工作 界面 如 

图 6.13 所 示 。 
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6.13 Dreamweaver 中 制作 热点 区 域 


在 Dreamweaver 标准 工作 界面 中 ， 左 边 部 分 是 代码 区 ， 可 以 在 这 里 写 代码 ， 右 边 部 分 是 页 面 预览 
区 ， 最 下 面 的 部 分 是 修改 一 些 属 性 值 的 面板 。 当 使 用 代码 在 页 面 中 放 入 图 像 以 后 ， 在 图 6.13 中 的 左下 
角 单 击 红色 线 框 中 的 图 形 按钮 ，Dreamweaver 中 便 直观 地 表示 了 不 同形 状 热点 区 域 的 图 标 。 选 中 后 ， 
在 页 面 预览 区 中 的 图 像 上 绘制 需要 的 形状 并 放置 在 需要 的 位 置 。 设 置 好 以 后 ， 代 码 区 域 会 自动 生成 
<map> 标 签 ， 这 时 在 代码 区 域 中 可 以 看 到 如 下 代码 : 

1 ”<img src= 图 片 /向 左 向 右 jpg / usemap="#Map"> 

2 <mapid="Map"> 

3 <area shape="circle" coords="303,265,86" href="#" /> 

4 </map> 

在 默认 的 代码 中 ， 第 2 行 中 id 属性 下 为 Map， 这 个 名 字 可 以 自行 定义 。 注 意 在 第 1 行 代码 中 ， 引 
用 了 这 个 命名 为 Map 的 热点 区 域 链接 。 而 在 第 3 行 的 <area> 标 签 中 ，shape 和 coords 属性 已 经 自动 生 


@ 


第 6 章 页 面 佑 


成 。 在 这 个 例子 中 ， 表 示 为 圆 形 的 选区 ， 位 置 定 义 在 (303，265) 的 坐标 位 置 上 ， 尾 数 86 代表 的 是 圆 
形 选区 的 半径 值 ， 用 来 控制 圆 面积 的 大 小 。 完 整 的 页 面 源码 如 实例 6-12 所 示 。 
【实例 6-12】 本 实例 借助 Dreamweaver 软件 来 制作 热点 图 像 链接 。 


<title> 借 助 Dreamweaver 软件 来 制作 热点 图 像 链 接 </title> 
</head> 


1 

2 

3 

4 

5 <body> 
6 <img src= 图 片 /向 左 向 右 .jpg / usemap="#Map"> 
区 

8 


<map id="Map"> 
<area shape="circle" coords="305,266,43" href="# 后 退 .html" /> 
9 < 上 -定义 热点 区 域 的 形状 一 > 
10 <area shape="rect" coords="246,105,298,135" hre 作 "后 退 .html"> 
| <area shape="rect" coords="264,44,293,74" href=" 后 退 .html"> 
亿 <area shape="rect" coords="243,16,260,51" href=" 后 退 .html"> 
13 <area shape="rect" coords="23,40,59,74" href=" 后 退 .html"> 
14 <area shape="rect" coords="13,98,59,120" href=" 后 退 .html"> 
15 <area shape="rect" coords="40,132,78,162" href=" 后 退 .html"> 
16 </map> 
17 </body> 
18 </html> 
【运行 程序 】 在 浏览 器 中 的 效果 如 图 6.14 所 示 。 
注意 : 红色 线 框 中 标 出 的 区 域 就 是 热点 区 域 ， 但 是 这 些 热 点 区 域 在 页 面 上 是 看 不 到 的 。 只 有 将 鼠标 指针 
移动 到 这 些 区 域 ， 才 会 看 到 指针 样式 发 生 了 改变 ， 变 为 “ 手 形 ”的 样式 ， 表 明 这 个 地 方 有 链接 。 
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图 6.14 热点 区 域 链接 
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6.4 在 新 窗口 中 显示 链接 窗口 


健 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 在 新 窗口 中 显示 链接 窗口 .wmv 

在 先前 的 所 有 链接 中 , 页 面 都 是 在 同一 页 面 中 跳 转 , 有 时 设计 者 希望 链接 的 页 面 在 新 的 窗口 中 打开 ， 
这 时 只 要 在 <a> 标 签 中 添加 “target=_blank” 即 可 。 如 实例 6-13 表现 的 是 在 新 窗口 中 弹出 页 面 的 方法 。 

【实例 6-13】 本 实例 介绍 在 新 窗口 中 显示 链接 窗口 的 方法 。 


re 实例 6-13: 在 新 窗口 中 显示 链接 窗口 的 方法 
源码 路 径 : 光盘 \ 源 文件 \06\6-13.html 


<head> 
<title> 新 窗口 显示 链接 窗口 </title> 
</head> 


<body> 
<a href=" 后 退 .html" target=_blank> 新 窗口 显示 链接 窗口 </a> 
</body> 

</html> 


【运行 程序 】 页 面 在 浏览 器 中 的 效果 如 图 6.15 所 示 。 
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图 6.15 在 新 窗口 中 显示 链接 窗口 


6.5 案例: 制作 普通 链接 的 主页 


茵 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 案 例 : 制作 普通 链接 的 主页 .wmv 

在 网 页 上 经 常 遇 到 这 样 的 链接 功能 : 一 个 主页 上 罗列 很 多 名 词 条 目 ， 每 个 条 目 链接 着 一 个 页 面 ， 
用 来 为 专门 的 链接 条 目 服务 。 实 例 6-14 介绍 了 美国 电影 史上 票房 前 30 名 的 电影 。 目 前 为 止 ，《 铁 达 
尼 号 》 依 然 排 位 第 一 ， 这 里 就 以 它 为 一 个 目录 ， 运 用 各 种 链接 方式 。 类 似 的 信息 导航 页 面 很 多 ， 通 过 
该 实例 来 达到 抛砖引玉 的 作用 。 

【实例 6-14】 本 实例 设置 了 一 个 主页 : 一 个 简单 的 电影 目录 展示 。 


第 6 章 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3 <html xmlns="http://www.w3.org/1999/xhtml"> 
4 <head> 
5 <style type=text/css> 
6 a {color:teal; // 设 置 未 访问 时 的 链接 颜色 
区 text-decoration:none /去 除 链接 下 划 线 
8 
9 a:visited {color:silver; /设置 访问 后 的 链接 颜色 
10 text-decoration:none 
11 
12 a:hover {color:red; // 设 置 鼠标 指针 滑 过 链接 时 的 颜色 
13 text-decoration:underline 
14 } 
15 </style> 
16 <!-- 使 用 样式 表 来 修改 页 面 链接 状态 -> 
17 <title> 制 作 普通 链接 的 主页 </title> 
18 </head> 
19 <body> 
20 <h3>Imdb 电影 评分 排名 </h3> 
| <p> 
22 <a href=#1-10>1-10</a>&nbsp; <!- 设 置 页 面 的 链接 --> 
23 <a href=#11-20>11-20</a>&nbsp; 
24 <a href=#21-30>21-30</a> 
25 </p> 
26 <br><hr> 
ZE <p> 
28 <a id="1-10"><a href="6-15 泰坦 尼克 号 .html"> <!- 设 置 页 面 的 锚 点 --> 
29 1.” 铁 达 尼 号 (1997) </a></a><br /> 
S00 
Ey | </p> 
32 <p> 
33 <a id="11-20">11.， 蜘蛛 侠 2 (2004) </a> <br /> 
| 
5 </p> 
36 <p> 
37 <a id="21-30">21. Iron Man (2008) </a> <br/> 
230500 
39 </body> 
40 </html> 


【实例 6-15】 本 实例 设置 了 实例 6-14 中 主页 的 子 页 面 : 泰坦 尼克 号 。 


页 面色 按 。 


re 实例 6-15: 设置 实例 6-14 中 主页 的 子 页 面 : 泰坦 尼克 号 
源码 路 径 : 光盘 \ 源 文件 \06\6-15.html 


| <!IDOCTYPE html PUBLIC "-//W3CWDTD XHTML 1.0 Transitional//EN" 

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 <html xmlns="http://www.w3.org/1999/xhtml"> 

了 <head> 

5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6 <title> 子 页 


8 </head> 

9 <body> 

10 <p> 英 文 名 : 《Titanic</p> 

11 <p><img src=" 图 片 / 铁 达 尼 号 jpg" width="97" height="140" /></p> 

12 ”<p> 中 文 名 : 泰坦 尼克 号 <br /> 

450 

14 <p>【 剧 情 简介 】 <br /> 

15 为 了 寻找 1912 年 在 大 西洋 沉没 的 泰坦 尼克 号 和 船上 的 珍贵 财宝 -一 价值 连城 的 “ 海 
16 

fi <p><a href="6-14 主页 .html"><img src=" 图 片 /返回 主页 .bmp" 
18 border=0/></a></p> 

19 </body> 

20 </html> 


【运行 程序 】 既 然 是 页 面 链 接 ， 首 先 必须 是 在 两 个 以 上 的 页 面 之 间 互 动 。 这 里 使 用 主页 来 罗列 目 
录 ， 如 实例 6-14 所 示 ， 并 且 制 作 其 中 一 个 目录 的 子 页 ， 如 实例 6-15 所 示 。 如 果 单 击 主页 中 1-10、11-20 
或 者 21-30 超 链接 ， 页 面 会 根据 锚 点 位 置 ， 自 动 找到 同 页 面 中 相对 应 的 内 容 ， 如 图 6.16 所 示 。 单 击 “ 主 
页 ”中 排 位 第 一 的 “1. 铁 达 尼 号 〈1997) ”时 ， 页 面 跳 转 到 子 页 “泰坦 尼克 号 ”， 在 子 页 下 方 的 左边 
有 个 “小 房子 ”图 像 ， 其 作用 是 链接 回 主页 
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图 6.17 子 页 链接 回 主页 
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在 这 两 个 实例 中 ， 需 要 注意 链接 状态 的 设置 ， 如 实例 6-14 中 ， 第 6 一 14 行 ， 以 及 同 页 面 内 文本 链 
接 的 设置 和 对 “1. 铁 达 尼 号 〈1997) ”设置 的 超 链 接 。 而 在 实例 6-15 中 ， 注 意 第 18 行 代码 ， 掌 握 如 
何 去 除 图 像 边框 ， 并 使 用 图 像 链接 回 主页 的 技巧 。 


注意 : 第 6~ 14 行 使 用 的 是 CSS 样 式 表 来 修饰 链接 状态 ， 在 第 7 章 中 有 详细 的 介绍 。 在 图 6.17 中 ， 由 于 主 
页 的 链接 已 经 是 被 访问 过 的 状态 ， 所 以 呈现 出 设 定好 的 灰色 。 


6.6 小 结 


本 章 介 绍 了 超 链接 这 一 互联 网 中 最 具 特 色 的 技巧 , 这 些 技巧 始终 围绕 一 个 标签 <a> 标 签 展开 。 但 其 
展现 出 的 形式 却 是 多 种 多 样 ， 说 明了 超 链接 是 人 性 化 设计 的 一 门 技术 ， 其 变化 非常 多 。 本 章 主要 的 知 
识 点 有 : 

超 链接 的 概念 ， 以 及 如 何 确定 链接 地 址 放置 页 面 文 件 。 

基本 的 文本 链接 和 图 像 链接 。 

链接 到 邮箱 。 

使 用 id 属性 的 超 链接 ， 可 以 实现 同一 页 面 内 的 跳 转 。 

使 用 CSS 修饰 链接 的 状态 。 

使 用 自 定义 图 形 和 图 像 修改 链接 的 下 划 线 。 

借助 软件 Dreamweaver 制作 图 像 热 点 区 域 链接 。 

在 新 窗口 中 显示 链接 页 面 。 

本 章 最 后 通过 一 个 综合 案例 表现 了 超 链接 的 设置 是 一 门 自由 的 艺术 。 如 果 设 计 者 愿意 ， 可 以 将 链 
接 放 在 页 面 中 的 任何 地 方 ， 但 是 不 要 忘记 ， 提 供 友 好 性 、 便 捷 的 链接 才 是 最 重要 的 。 在 第 7 章 中 ， 将 
介绍 CSS 的 使 用 规则 ， 通 过 CSS 样式 表 ， 可 以 实现 更 多 优秀 的 页 面 效 果 。 


6.7 本 章 习 题 


习题 6-1 在 页 面 创建 一 个 文本 链接 ， 单 击 链接 可 以 链接 到 百度 网 站 的 首页 ， 如 图 6.18 所 示 。 


es 


|hapV/wwwbaiducor 有 瑟 100% ~ | > 


图 6.18 创建 文本 链接 
【分 析 ]】 在 页 面 中 先 使 用 <a> 标 签 添加 超 链接 ， 然 后 将 文本 放置 在 链接 中 ， 链 接地 址 是 百度 的 网 页 


【关键 代码 】 
<a href="http://www.baidu.com"><h3> 链 接 到 百度 </h3> </a> 


习题 6-2 在 页 面 中 添加 一 幅 图 片 ， 并 为 图 片 添加 一 个 链接 ， 链 接 到 搜狐 网 站 首页 ， 效 果 如 


图 6.19 所 示 。 
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图 6.19 创建 图 像 链接 

【分 析 】 本 题 主要 考查 读者 对 图 片 链接 的 掌握 ， 注 意 链接 路 径 要 正确 填写 。 
【关键 代码 】 

<a href="http://www.sohu.com/"><img src=" 图 片 /搜狐 .png" width="200" height="180" /></a> 


习题 6-3 下面 给 出 一 段 代码 ， 请 说 明 加 粗 代码 的 含义 。 


<head> 
<style type="text/css"> 
a:link { 
color: #F00; 
8 
a:visited { 
color: #CCC; 
8 
</style> 
</head> 
<body> 
这 是 一 个 <a href="#"> 空 链接 </a>。 
</body> 
【分 析 】 本 题 主 要 考查 读者 对 链接 样式 的 设置 的 掌握 程度 。 其 中 ， 加 粗 的 代码 在 <style> 标 签 中 ， 
并 且 对 link、visited 属性 进行 设置 。 链 接 前 的 颜色 与 链接 后 的 颜色 都 进行 了 设置 。 
习题 6-4 ”在 网 页 中 给 出 一 幅 图 片 , 设置 热点 区 域 链接 ,实现 当 用 户 单 击 画 中 的 花 休 时 ,可 以 链接 
到 百度 网 站 ; 当 用 户 单 击 画 中 的 花瓶 时 ， 可 以 链接 到 新 浪 网 站 ， 如 图 6.20 所 示 。 
【分 析 】 在 网 页 制作 过 程 中 ， 热 点 区 域 链接 的 应 用 也 是 非常 广泛 的 。 需 要 注意 热点 区 域 定义 时 的 
位 置 取 向 。 这 里 使 用 <map> 标 签 进行 定义 。 


全 


间 FEHTML+CSS+ PD -© 
文件 (月 ”要 油 (E) 可 要 (V) 收音 夫人 的 工 、 


图 6.20 设置 热点 区 域 链接 效果 
【关键 代码 】 


<img src=" 图 片 /春天 .jpg" width="130" height="150" usemap="#map2" border="0" /> 
<map name="map2" id="map2"> 
<area shape="circle" coords="62,46,34" href="http://www.baidu.com/" /> 
<area shape="rect" coords="-6,86,138,126" href="http://www.sina.com/" /> 
</map> 


习题 6-5 在 网 页 中 添加 一 段 文本 链接 ， 并 设置 其 在 不 同 的 状态 下 显示 不 同 的 效果 ， 如 图 6.21 
所 示 。 


HRleV//FV 汪 qiHTML+C 或 100% ~ 


| “链接 未 被 访问 时 。 | | 链接 被 选中 时 | | “链接 已 被 访问 过 。 | 


图 6.21 设置 链接 样式 


【分 析 】 这 里 使 网 页 中 的 链接 在 链接 前 、 链 接 后 、 鼠 标 指针 停留 在 链接 上 都 显示 不 同 的 状态 ， 使 
得 整个 网 页 更 加 丰富 多 彩 。 
【关键 代码 】 


a {color:#906; 
text-decoration:none; 
} 

a:visited {color:#66F:; 
text-decoration:none; 
} 

a:hover {color:red; 
text-decoration:underline; 

8 


第 2 篇 页面 制作 提高 篇 


在 第 1 篇 中 ， 读 者 已 经 可 以 制作 简单 的 网 页 了 。 当 网 页 内 容 多 的 时 候 ， 
我 们 就 要 考虑 内 容 如 何 分 布 。 这 就 是 本 篇 要 讲解 的 经 典 问 题 网 页 布局 。 
本 篇 内 容 较 多 ， 读 者 一 定 要 多 学 多 练 。 


第 7 章 CSS 规则 

第 8 章 表格 

第 9 章 创建 框架 结构 的 页 面 
第 10 章 当 CSS 样式 表 遇 到 层 
第 11 章 进一步 讨论 页 面 布局 


第 7 章 “CSs 规则 


对 于 设计 者 来 说 ， 总 是 希望 能 够 在 页 面 中 自由 发 挥 创意 ， 实 现 自己 的 想法 。 然 而 ，HTML 语言 中 
的 很 多 标签 都 存在 很 大 的 局 限 性 ， 如 <h1> 标 签 定义 的 标题 ， 始 终 是 定义 为 较 大 的 字体 的 文本 ， 不 会 改 
变 ， 所 以 在 没有 CSS 以 前 ,设计 者 不 得 不 借助 其 他 标签 来 补充 标签 的 属性 。 而 CSS 是 什么 ?CSS 就 是 
一 个 无 所 不 能 的 巨大 的 “属性 集 ”。 

从 本 章 开始 ， 读 者 要 尽量 忘记 原来 标签 的 定式 ，CSS 样式 表 如 同一 种 上 乘 的 武 学 ， 类 似 于 一 种 无 
招 胜 有 招 的 境界 。 例 如 ， 虽 然 <h1> 标 签 依然 常 被 用 来 定义 标题 ， 但 这 是 因为 人 们 习惯 于 这 样 使 用 ， 而 
<hl> 标 签 表现 出 来 的 样式 却 并 非 一 成 不 变 的 ， 当 设计 者 使 用 CSS 时 ， 可 以 令 <h1> 标 签 内 的 文本 变 成 任 
何 想 要 的 样子 。 本 章 的 主要 知识 点 如 下 。 

学 习 CSS 样式 表 的 写法 规则 。 

理解 选择 器 及 其 写法 。 

选择 器 的 多 种 样式 及 作用 。 

使 用 CSS 样式 表 的 3 种 方式 ， 如 行内 CSS、 榜 入 式 CSS 和 外 联 式 CSS 。 

使 用 CSS 样式 表 编 辑 页 面 。 


7.1 如 何 学 习 CSS 


鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 如 何 学 习 CSS.wmv 

CSS 常 被 翻译 为 “级 联 样式 表 ”， 如 果 现 在 还 不 理解 “级 联 ” 是 什么 概念 ， 那 么 可 以 从 Cascading 
一 词 的 本 意 来 理解 。 其 有 “小 瀑布 ， 瀑 布 状 的 ”意思 ， 不 妨 就 把 CSS 形象 地 理解 为 “瀑布 一 样 的 样式 
表 ”， 一 个 CSS 看 上 去 是 这 样 的 : 


body{ 
font-family: 黑体 ; /字体 样式 
font-size: 80%; /字体 大 小 
color: black; // 字 体 颜 色 
background-color:blue; /背景 颜色 
margin: 1em; /在 页 面 中 的 定位 
padding: 0; /设置 间距 为 0 


) 

大 括号 中 是 一 排 属性 值 的 描述 ， 这 样 看 上 去 ， 是 不 是 有 些 像 瀑 布 状 ? 其 实 ，CSS 并 不 神秘 ， 在 页 
面 中 , 使 用 属性 标签 来 修饰 页 面 内 容 的 表现 , 而 CSS 的 作用 正 是 修饰 页 面 内 容 的 表现 形式 。 所 以 ，CSS 
本 身 就 是 一 个 “属性 集 ”， 只 不 过 这 个 属性 可 以 由 设计 者 自 定 义 ， 可 以 无 限 扩展 。 


第 7 章 CSS 规则 


事实 上 ，“ 级 联 ” 指 的 是 CSS 样式 的 继承 性 ， 在 本 章 后 面 的 内 容 中 会 体现 出 这 一 点 。CSS 样式 表 
有 它 自身 的 使 用 规则 ， 这 里 通过 一 个 简单 的 例子 认识 一 下 CSS， 如 实例 7-1 所 示 为 一 个 简单 导航 栏 。 
【实例 7-1】 本 实例 介绍 了 一 个 简单 的 CSS 的 使 用 。 


区 | 实例 7-1: 一 个 简单 的 CSS 的 使 用 


源码 路 径 : 光盘 \ 源 文件 07\7-1.html 


<head> 


<style> 


<div id="header"> 
<h1> 导 航 栏 </h1> 
<ul> 
<li><a href="#"> 目 录 1</a></li> 
<li ><a href="#"> 目 录 2</a></li> 
<li><a href="#"> 目 录 3</a></li> 
<li><a href="#"> 目 录 4</a></li> 
</ul> 
</div> 
<div id="content"> 
<p> 使 用 CSS 修饰 导航 栏 </p> 
</div> 


【运行 程序 】 代 码 中 缺少 了 第 5 一 20 行 ， 这 部 分 就 是 CSS 样式 表 定义 部 分 。 本 例 中 先 把 这 部 分 去 
掉 ， 然 后 一 步 步 地 将 CSS 样式 表 填 入 ， 以 观察 CSS 带 来 的 变化 。 其 中 ，<div> 标 签 的 作用 是 封装 CSS 


样式 表 ， 


本 书 将 在 后 面 的 章节 中 学 习 ， 缺 少 CSS 的 这 段 代码 的 效果 如 图 7.1 所 示 。 


说 明 : 本 例 用 来 展示 CSS 的 效果 ， 读 者 可 以 不 必 在 意 <div> 标 签 所 起 的 作用 。 
正如 本 书 在 前 面 章节 中 介绍 的 知识 一 样 ， 这 是 一 个 普通 的 具备 链接 的 列表 。 接 着 ， 在 原先 的 代码 


中 ， 补 全 第 5 一 9 行 代码 。 而 这 几 行 代码 就 是 一 个 简单 的 样式 表 ， 这 个 样式 表 中 集合 了 3 个 属性 ， 当 补 


全 到 原来 的 代码 中 ， 页 面 变 为 如 图 7.2 所 示 ， 导 航 栏 的 列表 符号 被 去 除了 。 
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#header ul{ 
list-style: none; /去 除 导航 栏 的 列表 符号 
padding:0; // 定 位 页 面 的 位 置 
margin:0; 


l= .5 


(SAP o- Bre D 
ET ET 


导航 栏 


使 用 css 修饰 导航 栏 


L sm 
图 7.1 未 使 用 CSS 的 页 面 图 7.2 去 除 列表 符号 


原来 ， 这 上段 代码 是 用 来 去 除 列表 符号 的 ， 由 “list-style: none;” 这 一 属性 中 便 可 以 看 出 。 接 着 ， 补 
全 代码 中 的 第 10 一 15 行 ， 如 下 所 示 。 保 存 后 重新 打开 这 个 页 面 ， 浏 览 器 中 新 的 效果 如 图 7.3 所 示 。 


10 #header li{ 

11 display: inline; /以 行内 形式 展示 列表 
12 border solid; /定义 边框 的 样式 

13 border-width: 1px 1px 0 1px; // 定 义 边框 的 粗细 

14 margin: 0 0.5em 0 0; /定义 其 在 页 面 中 的 位 置 
15 站 


这 几 句 代码 也 是 用 来 改变 列表 的 排列 方式 , 比 起 原先 的 页 面 , 已 经 发 生 了 很 大 的 改变 。 这 里 的 CSS 
样式 表 和 先前 的 相 比 ， 格 式 类 同 ， 改 变 的 只 是 大 括号 中 的 属性 。 


注意 : 这 个 样式 表 的 命名 是 header li。 这 和 <body> 标 签 中 的 <li> 又 有 什么 关联 呢 ? 本 章 会 在 后 面 的 内 容 
中 有 所 解释 。 


图 7.3 中 的 导航 栏 边框 显得 有 些 紧凑 ， 而 通过 CSS 能 够 很 容易 地 改变 边框 的 大 小 ， 这 就 需要 用 到 
padding 属性 。padding 属性 是 一 个 使 用 频 度 非常 高 的 属性 ， 其 作用 是 在 一 个 声明 中 设置 元 素 的 内 边 距 
属性 。 在 这 里 ， 给 原来 的 代码 补 上 第 16 一 18 行 。 最 终 在 浏览 器 中 更 新 的 效果 如 图 7.4 所 示 。 

16 #headerlia{ 


Qe padding: 0 1em; // 定 义 导航 栏 文本 的 链接 
18 } 


Pe = [= [5 
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使 用 CS3 专 外 导航 栏 
Sess Er 
图 7.3 横向 排列 导航 目录 图 7.4 改变 目录 栏 边 距 大 小 


当 导 航 栏 完 成 以 后 , 接 下 来 给 页 面 中 的 文本 “使 用 CSS 修饰 导航 栏 ”添加 边框 , 这 在 早先 的 HTML 
标签 中 只 能 通过 表格 来 实现 ， 而 且 很 麻烦 。 使 用 CSS 样式 表 ， 只 需要 再 添加 以 下 两 句 代码 。 


© 


7 C5 各 


19 #content { border: 1px solid; /定义 边框 的 样式 
20 } 
最 后 ， 整 个 页 面 就 填补 完成 了 ， 如 图 7.5 所 示 是 最 终 页 有 国生 至 本 二 二 | 
面 的 效果 。 | 
【深入 学 习 ] 不 难 发 现 , 使 用 CSS 时 ,原则 是 “ 先 定义 ，。 | 导航 栏 
再 使 用 ”。CSS 样式 表 的 作用 是 用 来 表现 页 面 样式 ， 可 以 令 人 一 
页 面 产生 翻天 覆 地 的 变化 ， 而 HTML 只 需要 完成 构建 基础 | 二 用 css 颂 起 守 航 栏 
的 页 面 结构 。 
在 这 个 例子 中 ，CSS 的 样式 表 都 是 放 在 <head> 标 签 内 Er 
的 ， 注 意 样 式 表 的 定义 规则 。 如 eader ul， 它 们 是 如 何 和 图 75 给 文本 添加 边框 


HTML 标签 相关 联 的 ， 这 其 中 有 两 个 核心 的 问题 ; 如 何 定义 
CSS 样式 表 和 如 何 使 用 CSS 样式 表 。 围 绕 这 两 个 问题 ， 本 章 将 详细 介绍 CSS 的 使 用 规则 。 


7.2 CSS 基本 的 规则 写法 


CSS 已 经 发 展 很 多 年 了 ， 但 是 直到 前 两 年 ，CSS 才 得 到 所 有 网 页 浏览 器 的 支持 。 至 今 ，CSS 已 经 
形成 了 自己 的 一 套 语法 ， 这 套 语法 由 一 些 标志 构成 。 简 单 地 说 ， 就 是 一 个 基本 的 样式 表 由 选择 器 、 属 
性 和 属性 值 构成 。 


7.2.1 基本 的 样式 表 的 写法 


健 4 知识 点 讲解 ， 光 盘 \ 视 频 讲 解 \ 第 7 章 \ 基 本 的 样式 表 的 写法 .Wmv 
CSS 样式 表 也 有 特有 的 写法 规则 ， 在 特定 的 规则 下 编写 ， 才 可 以 使 之 生效 ， 一 个 标准 的 CSS 写法 
如 下 所 示 ; 


h1 { 
font-family: 黑 体 ; 
} 


hl: 表示 选择 符 。 
font-family: 表示 属性 ， 这 里 的 作用 是 定义 字体 。 
“黑体 ” 是 属性 值 。 这 里 表示 定义 的 字体 为 黑体 字 。 


很 多 句 ， 所 有 的 声明 语句 都 要 放 在 “fy” 内 。 
注意 : 声明 语句 的 结尾 不 能 遗漏 英文 分 号 “;”。 


hl { font-family: 黑 体 ; }: 归结 起 来 ， 这 就 是 一 个 基本 的 CSS 样式 表 。 
CSS 样式 表 的 引用 需要 放 在 <style> 标 签 中 声明 。 


SS 网 页 设计 评介 


7.2.2 ”使 用 类 class 和 标志 id 链接 样式 表 
风 4 知 识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 7 章 \ 使 用 类 class 和 标志 i 链接 样式 表 .wmv 


一 个 定义 好 的 样式 表 , 需要 通过 类 class 或 标志 id 来 定位 它 所 作用 的 页 面 内 容 。id 标志 在 同 页 面 中 


可 以 实现 链接 (参见 第 6 章 ) ， 作 用 相当 于 在 页 面 中 定位 一 个 锚 点 。id 在 链接 CSS 属性 表 时 ， 所 起 到 
的 作用 也 是 一 样 的 ， 而 类 似 这 样 作 用 的 还 有 类 class。 类 class 和 标志 id 之 间 是 有 区 别 的 ， 如 实例 7-2 
所 示 即 为 类 选择 器 和 标志 选择 器 的 对 比 。 

【实例 7-2】 本 实例 介绍 类 选择 器 和 标志 选择 器 的 区 别 。 


re 实例 7-2: 类 选择 器 和 标志 选择 器 的 区 别 
源码 路 径 : 光盘 \ 源 文件 \07\7-2.html 


1 -<html> 

2 <head> 

3 <title> 类 选择 器 和 标志 选择 器 </title> 

4 <style type="text/css"> 

5 .style1 {color: red; /这 是 class 选择 器 的 定义 样式 
6 font-size:16px; 

7 } 

8 #style2 {color: blue; /这 是 id 选择 器 的 定义 样式 
9 font-size:16px; 

10 } 

11 ”</style> 

12 ”</head> 

|- <body> 


14 <h3 class="style1"> 使 用 CLASS 选择 器 的 红色 字体 </h1> 
15 <h3 class="style2"> 使 用 CLASS 选择 器 的 红色 字体 </h1> 
16 <h2 id="style1"> 使 用 id 选择 器 的 蓝 色 字体 </h2> 

中 <h2 id="style2"> 使 用 id 选择 器 的 蓝 色 字体 </h2> 

18 </body> 

19 </html> 


【运行 程序 】 该 实例 展示 了 类 class 和 标志 id 是 如 何 调用 CSS 样式 表 , 然后 作用 于 HTML 页 面 的 ， 
效果 如 图 7.6 所 示 。 此 外 ， 类 class 和 标志 id 之 间 在 调用 功能 上 也 不 同 ，class 可 以 被 用 于 多 个 对 象 被 设 
定 成 同 种 CSS 样式 的 情况 ， 假 如 这 样 写 : 


<h2 class="style1"> 
<h3 class="style1"> 


上 面 这 种 写法 是 正确 的 。 但 是 如 果 是 id 选择 器 ， 则 只 能 用 于 一 个 对 象 。 所 以 不 能 这 样 写 : 


<h2 id="style2"> 
<h3 id="style2"> 


注意 : 


从 图 中 可 以 看 出 ， 代 码 中 第 14 行 和 第 17 行 成 功 调用 了 CSS 样 式 表 ， 而 像 第 15 行 代码 和 第 16 行 代 
码 这 样 的 运用 是 不 起 作用 的 。 所 以 从 这 个 对 比 中 , 可 以 看 到 class 选 择 器 和 id 选择 器 使 用 的 方式 是 
不 同 的 。 


@® 


(DE emics: nD - 0 | Sssnse 
ea 1) 
使 用 CLASS 选择 器 的 红色 字体 | 


使 用 CLASS 选择 器 的 红色 字体 
使 用 id 选择 器 的 蓝 色 字体 
使 用 34 选择 澡 的 音色 字体 
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7.6 选择 器 


7.2.3 创建 选择 器 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 创 建 选择 器 .wmv 

选择 器 是 用 来 告诉 浏览 器 这 段 代 码 将 应 用 到 页 面 中 的 哪个 对 象 。 通 过 调用 ，HTML 可 以 根据 内 容 
的 不 同 来 选择 不 同 的 样式 来 修饰 内 容 。 所 以 要 将 CSS 样式 应 用 到 HTML 中 , 首先 要 选择 合适 的 选择 器 
来 对 HIML 的 元 素 进行 样式 的 控制 。 

CSS 中 主要 有 3 种 基本 选择 器 : HTML 选择 器 (HTML selector) 、id 选择 器 (id selector) 和 class 
选择 器 (class selector) 。HTML 选择 器 可 以 延伸 出 派生 选择 器 ， 而 多 种 基本 选择 器 混合 使 用 时 则 定义 
为 分 组 选择 器 。 此 外 ， 还 有 一 种 特殊 的 伪 类 选择 器 。 在 本 节 中 ， 将 介绍 这 6 种 选择 器 。 


1. HTML 选择 器 


所 谓 HIML 选择 器 , 其实 就 是 重新 定义 HTML 表现 性 标签 的 样式 , 也 就 是 使 用 标签 名 来 作为 选择 
器 。 正 如 文中 最 初 所 提 的 ，<hl> 标 签 内 的 文本 应 是 黑色 大 体 字 ， 而 当 通 过 重新 定义 之 后 ，<hl1> 标 签 内 
可 以 是 任何 样式 ， 如 实例 7-3 所 示 为 如 何 将 <h1> 标 签 改变 成 一 个 选择 器 。 

【实例 7-3】 本 实例 介绍 了 HTML 选择 器 的 使 用 。 


re 实例 7-3: HTML 选择 器 的 使 用 
源码 路 径 : 光盘 \ 源 文件 077-3.html 


1 -<html> 

2 <head> 

3 <title> HTML 选择 器 的 使 用 </title> 

4 <style type="text/css"> 

5 h1{ /使 用 <h1> 标 签 作为 选择 器 
6 Color:#555555; // 将 文本 颜色 改变 为 灰色 
区 font-size:2.3em; /改变 字体 大 小 

8 font-family: 微软 雅 黑 ; /改变 字体 样式 

9 

10 </style> 

jy </head> 

12 <body> 

13 <h1> HTML 选择 器 的 使 用 </h1> 

14 </body> 

15 </html> 
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【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 7.7 所 示 。 a | 
CI TE 


【深入 学 习 】 结 果 表 明 <h1> 标 签 下 的 文本 已 经 不 再 是 传统 <hl> | AD ERA jEm 和 和 
标签 显示 的 文本 , CSS 具有 很 便捷 的 灵活 性 , 可 以 修改 很 多 的 标签 。 HTML 选 择 器 的 使 用 


2. 派生 选择 器 


通过 依据 元 素 在 其 位 置 的 上 下 文 关系 来 定义 样式 ， 称 为 派生 选 aa -| 
择 器 。 也 就 是 前 一 个 对 象 包含 后 一 个 对 象 ， 对 象 之 间 使 用 英文 的 空 
格 键 来 隔 开 。 这 种 方式 很 好 地 体现 了 CSS 的 “级 联 ” 特性。 如 下 面 
这 个 例子 ， 使 用 了 两 个 标记 来 定义 CSS 样式 表 。 
hih2{ 
color:red; 
font-size:1em; 
font-family: 黑体 ; 
} 


注意 : “hlh2” 和 “hl,h2” 含 义 是 不 同 的 ， 将 在 后 面 的 分 组 选择 器 中 介绍 后 者 的 定义 。 


在 写法 上 ， 在 上 级 对 象 hl 和 目标 对 象 h2 之 问 使 用 空格 来 指定 样式 ， 如 将 这 个 样式 表 添 加 入 实 
例 7-3 的 <style> 标 签 中 ， 样 式 表 将 作用 于 <h1> 标 签 内 的 <h2> 标 签 中 的 对 象 ， 这 里 添加 以 下 几 行 代码 来 
说 明 ， 如 在 实例 7-3 的 <body> 部 分 中 放 入 以 下 代码 : 

<h1> HTML 选择 器 的 使 用 </h1> 


<h2> HTML 选择 器 的 使 用 </h2> 
<h1><h2> HTML 选择 器 的 使 用 </h2></h1> 


其 效果 如 图 7.8 所 示 。 

所 以 在 定义 HTML 样式 表 时 ， 当 定义 “hl h2” 样 式 表 时 ， 并 不 是 说 hl 和 h2 是 两 个 相同 的 CSS 
样式 表 ， 而 是 被 看 作 一 个 整体 来 定义 。 所 以 在 页 面 中 ,使 用 “<h1><h2>” 时 ， 是 作为 一 个 整体 出 现 的 。 
因此 ， 即 使 代码 写成 这 样 : 

<h1> 其 他 文本 内 容 <h2> HTML 选择 器 的 使 用 </h2> 其 他 文本 内 容 </h1> 


图 7.7 HTML 选择 器 的 使 用 


其 效果 如 图 7.9 所 示 。 

rms Do- ©| Gurvss (HDI ET 

文件 站 ” 拆 丝 (E) 理 吾 (V| ”点 臣 夫 (A) 工具 和 T) ”大 动 (H) 文中 状 怠 (E) ” 直 看 (V) 收 坦 夫 (A) 工具 (T) 孝 动 |” 

HTML 选 择 器 的 使 用 其 他 文本 内 容 . 

HTML 选 择 器 的 使 用 HTML 选 择 器 的 使 用 

HTML 选 择 器 的 使 用 其 他 文本 内 容 

区 100% 
图 7.8 标签 符 的 级 联 1 7.9 标签 符 的 级 联 2 

只 要 是 在 “<hl><h2>” 这 样 形式 内 的 文本 ， 无 论 <hl> 和 <h2> 之 间 是 否 含有 其 他 页 面 内 容 ， 一 样 都 


属于 “<hl><h2>” 样 式 表 定义 的 范围 。 但 是 ， 在 <h1> 标 签 中 的 文本 ， 依 然 只 受 限制 于 hl 样式 表 。 
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第 7 章 CSS 规则 


3. id 选择 器 

在 一 个 网 页 中 , 每 一 个 标签 都 可 以 用 一 个 id 属性 进行 名 称 的 指定 。 id 选择 器 就 是 指 在 HTML 中 用 
id 属性 对 样式 进行 调用 的 选择 器 。 那 么 这 个 样式 表 应 该 这 样 写 : 在 选择 器 的 开头 处 加 上 “#” 符 号 。 例 
如 ， 这 样 一 个 样式 表 : 


#text {font-size:1em;} 

而 将 这 个 样式 表 绑 定 到 HIML 对 象 上 时 ， 就 要 这 样 写 : 
<h1 id="text"> 文 本 内 容 </h1> 

而 id 选择 器 一 样 可 以 作为 派生 选择 器 ， 如 下 所 示 : 
#text p {color: blue;} 


这 样 ， 表 明 样式 表 将 只 作用 于 text 对 象 中 所 有 <p> 标 签 下 的 内 容 。 这 和 HTML 样式 表 的 嵌 套 原则 
是 一 样 的 。 

4. class 选择 器 

类 选择 器 ， 就 是 对 网 页 样式 归 类 的 选择 器 。 它 是 指 在 HTML 中 用 class 属性 对 样式 进行 调用 的 选 
择 器 。 如 果 希 望 通过 class 选择 器 来 设置 HTML 页 面 对 象 的 样式 ， 那 么 样式 表 的 写法 应 该 是 在 选择 器 
的 开头 处 加 上 “.” 符 号 ， 例 如 : 


.play { font-size:1em;} 
将 这 个 样式 表 绑 定 到 HTML 对 象 上 时 ， 要 使 用 class 选择 器 ， 例 如 : 
<h1 class="play"> 文 本 内 容 </h1> 
和 id 选择 器 一 样 ，class 也 可 以 作为 派生 选择 器 ， 例 如 : 
.fancytd{ 
color: #60; /修改 文本 颜色 
background: #666; /修改 页 面 背景 颜色 


说 明 : <td> 标 签 表示 的 是 表格 单元 格 。 
在 这 个 例子 中 ， 类 名 为 fancy 的 元 素 内 部 的 表格 单元 格 都 会 以 灰色 背景 显示 ,文本 则 是 检 色 文字 。 
5. 分 组 选择 器 
如 果 出 现 多 个 选择 器 定义 的 内 容 都 是 一 样 的 时 候 ， 例 如 : 
h1 {color:blue;} 
#text {color:blue;} 
.play {color:blue;} 
那么 ， 只 要 使 用 英文 的 辟 号 “,” 隔 开 选 择 符 就 可 以 了 。 例 如 : 
h1, #text, .play {color:blue;} 


ss na gt 


注意 : 
6. 
伪 


其 作用 
【 


当 给 选择 符 命名 时 ， 不 能 使 用 数字 开头 ， 必 须 以 字母 或 者 下 划 线 开头 。 
伪 类 和 伪 类 选择 器 
类 选择 器 并 不 是 很 多 ， 通 常用 来 定义 一 些 特殊 的 效果 。 其 写法 由 一 个 冒号 和 一 个 带 有 附加 条 件 


是 允许 设计 者 为 不 同 的 语言 定义 特殊 的 规则 。 
实例 7-4】 本 实例 介绍 伪 类 “:lang 语言》” 的 使 用 。 


re 实例 7-4: 伪 类 “:lang (语言 ) ”的 使 用 
源码 路 径 : 光盘 \ 源 文件 ,07\7-4.html 


<head> 
<style type="text/css"> 
q:lang(smile) 


{ 
quotes: "o(N_N)o" "~" // 这 里 定义 了 将 smile 转换 的 符号 


</style> 
</head> 
<body> 
好 吧 ， 展 示 一 个 笑脸 吧 
<p> 博 君 一 笑 <q lang="smile"> 祝 你 愉快 </q></p> 
</body> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 7.10 所 示 ， 伪 类 代码 的 位 置 被 伪 类 定义 的 内 容 所 蔡 代 。 


SE 


图 7.10 伪 类 “:lang (语言 ) ”的 使 用 


【深入 学 习 】CSS 中 还 有 一 些 其 他 伪 类 ， 如 表 7.1 所 示 。 


表 7.1 CSS 中 的 伪 类 


伪 类 作 用 

:active 将 样式 添加 到 被 激活 的 元 素 中 

:focus 将 样式 添加 到 被 选中 的 元 素 中 

:hover 当 鼠 标 指针 悬浮 在 页 面 对 象 上 方 时 ， 向 页 面 对 象 添加 样式 
:link 将 样式 添加 到 未 被 访问 过 的 链接 中 

:Visited 将 样式 添加 到 被 访问 过 的 链接 中 

:first-child 将 特殊 的 样式 添加 到 页 面 对 象 的 第 一 个 子 元 素 中 

‘lan 允许 设计 者 定义 指定 的 页 面 中 所 使 用 的 语言 


7.2.4 应 用 CSS 样式 表 


风 4 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 7 章 \ 应 用 CSS 样式 表 .wmv 

首先 需 分 清 应 用 CSS 样式 表 到 HTML 页 面 中 ， 和 将 CSS 样式 表 绑 定 到 HTML 页 面 中 的 对 象 ， 是 
两 个 不 同 的 概念 。 如 7.2.3 节 中 ， 通 过 不 同 的 选择 器 将 样式 表 绑 定 到 HTML 页 面 中 的 对 象 。 但 是 ， 使 
用 的 都 是 同一 种 方法 应 用 CSS 样式 表 到 HTML 页 面 中 。 这 种 方式 称 为 嵌入 样式 表 。 而 在 CSS 中 应 用 
CSS 样式 表 的 方法 共有 4 种 ， 剩 下 的 3 种 方法 分 别 是 内 联 样式 、 外 联 式 样式 表 和 多 重 样 式 表 。 

1. 谱 入 样式 表 


嵌入 样式 表 是 指使 用 <style> 标 签 将 CSS 样式 表 放 入 到 <head> 标 签 内 (参照 7.2.3 节 中 的 实例 ) 。 
这 种 用 法 的 好 处 在 于 将 页 面 的 表现 性 和 结构 性 实现 很 好 的 分 离 。 对 于 设计 者 来 说 ， 使 共同 协作 的 效率 
更 高 ， 写 法 如 下 : 


<style type="text/css"> 
</style> 
<style> 标 签 内 部 是 type 属性 ， 表 示 传 输 的 文本 类 型 为 样式 表 类 型 文件 ， 这 是 固定 格式 。 当 然 ， 也 


有 一 些 其 他 的 属性 可 供 使 用 ， 如 media 属性 ， 可 以 用 来 定义 以 何 种 媒介 来 提交 文档 。 文 档 可 以 被 显示 
在 显示 器 、 纸 媒介 或 者 听觉 浏览 器 等 ， 如 下 代码 : 


<style type="text/css" media="screen"> 
2. 内 联 样式 


内 联 样式 又 常 称 为 行内 CSS， 通 过 使 用 style 属性 来 引用 声明 语句 ， 放 在 页 面 结构 性 标签 的 后 面 ， 
例如 : 


<p style="color: sienna; margin-left: 20px"> 

页 面 文本 内 容 

</p> 

但 是 在 页 面 设计 中 ， 内 联 样式 应 尽量 少 用 ， 因 为 这 种 方法 不 能 将 页 面 表现 和 页 面 结构 很 好 地 分 开 ， 
通常 是 在 不 得 已 的 情况 下 起 到 补充 调整 的 作用 。 

3. 外 联 样式 表 

在 创建 整 站 的 工程 时 ， 一 个 CSS 样式 表 常 需要 同时 用 于 几 个 页 面 。 这 时 候 使 用 外 联 样 式 表 是 非常 
好 的 选择 。 因 为 CSS 样式 表 可 以 作为 一 个 独立 文件 存储 在 页 面 外 部 ， 后 绥 名 为 .css。 通 常 的 情况 是 使 用 
<link> 标 签 来 调用 外 联 样式 表 ， 写 法 如 下 


<link rel="Shortcut " type="text/css " href="some。 css " /> 


当然 ， 调 用 的 不 一 定 是 一 个 文件 ， 也 可 以 引用 URL 地 址 文件 。 此 外 还 有 一 种 使 用 “@import” 来 
应 用 外 联 样式 表 的 方法 ， 把 它 放 在 <style> 标 签 中 间 ， 写 法 如 下 : 


时 


CSSs 网 页 设计 详 外 


<style type="text/css"> 


@i 


mport url("some.css"); 


</style> 


4. 


多 重 样式 表 


在 样式 表 中 ， 如 果 出 现 多 种 样式 表 ， 它 们 之 间 应 有 先后 的 顺序 。 通 常 来 说 ， 当 多 个 样式 表 作 用 于 
同一 个 页 面 对 象 时 ， 离 这 个 页 面 对 象 最 近 的 样式 表 起 决定 性 的 作用 。 但 是 ， 行 内 样式 表 始 终 处 于 最 高 
级 别 ， 如 实例 7-5 所 示 为 多 重 样式 表 下 的 先后 关系 。 


实例 7-5】 本 实例 介绍 多 重 样式 表情 况 下 的 优先 级 。 


re 实例 7-5: 多 重 样式 表情 况 下 的 优先 级 
源码 路 径 : 光盘 源 文件 07\7-5.html 


<head> 
<title> 多 重 样式 表情 况 下 的 优先 级 
<ltitle> 
<link rel= "stylesheet" type="text/css" href="bobo.css"> 
<style type="text/css"> 
.hui {color:red; 
font-size:20px; 
小 
</style> 
</head> 
<body> 
<div class="bobo"> 
<p class="hui"> 多 重 样式 表情 况 下 的 优先 级 
</div> 
<div class="hui"> 
<p class="bobo"> 多 重 样式 表情 况 下 的 优先 级 
</div> 
<div class="hui"> 


// 这 是 外 联 样式 表 


// 这 是 内 联 样式 表 


<p style="color:orange"; class="hui";> 多 重 样式 表情 况 下 的 优先 级 


</div> 


说 明 : 在 这 个 例子 中 ,使 用 层 div 封 装 了 3 个 部 分 ， 在 层 之 内 的 样式 表 不 会 影响 到 层 之 外 的 文本 。 
【运行 程序 】.bobo 是 外 部 样式 表 ， 这 里 把 .bobo 外 部 样式 表 定 义 为 : 


.bobo {color:blue; 
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其 


font-size:20px; 
} 


效果 如 图 7.11 所 示 。 


【深入 学 习 】 可 见 ， 在 第 14 行 和 第 17 行 代码 中 ， 两 行 的 样式 表 交 换 了 位 置 ， 而 作用 于 文本 的 则 
是 离 页 面 对 象 最 近 的 样式 表 。 在 第 20 行 代码 中 ， 起 决定 作用 的 是 行内 样式 表 。 所 以 同一 种 引用 样式 表 
的 情况 下 ， 高 页 面 对 象 最 近 的 样式 表 起 作用 。 


名 7 车 Css 


1= 5 i 
【人 j 同 | 本 wsserrwucstep - cS sax 
文件 侣 “ 演 乱 日 到 看 M) 。 收 斌 交 内 工具 (]) 大 动人 
多 重 样式 表情 况 下 的 优先 级 
上 多 重 样式 去 情况 下 的 优先 级 


| 
| 多 重 样式 表情 况 下 的 优先 级 


ER 


图 7.11 多 重 样式 表情 况 下 的 优先 级 


7.3 用 CSS 来 修饰 页 面 文本 


本 书 在 前 面 的 章节 中 介绍 了 文本 的 排版 ， 但 并 没有 过 多 介绍 如 何 展 现 文本 的 形式 ， 而 学 习 了 CSS 
的 使 用 后 ， 将 为 设计 者 打开 一 片 广阔 的 设计 天 空 ， 令 文本 可 以 变化 出 奇妙 的 样式 。 


7.3.1 修饰 页 面 文本 字体 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 修 饰 页 面 文本 字体 .wmv 

不 要 忽视 字体 的 作用 , 字体 的 设置 能 给 浏览 用 户 带 来 很 大 的 视觉 影响 。 在 CSS 中 , 使 用 font-family 
属性 来 定义 字体 的 样式 。 字 体 的 样式 很 多 ， 但 原则 上 浏览 器 只 支持 系统 中 默认 的 字体 。 如 果 设 计 者 希 
望 使 用 自 定 义 字体 ， 需 要 先 将 字体 存 入 计算 机 。 实 例 7-6 展示 了 如 何 通过 样式 表 来 修饰 文本 字体 。 

【实例 7-6】 本 实例 介绍 CSS 修饰 文本 字体 的 方法 。 


re 实例 7-6: CSS 修饰 文本 字体 的 方法 
源码 路 径 : 光盘 \ 源 文件 07V7-6html 


1 <html> 

这 <head> 

a <title>CSS 修饰 文本 字体 </title> 

4 <style type="text/css"> 

5 h1 {font-family: 微 软 雅 黑 ; // 设 置 标题 字体 样式 
6 } 

区 p {font-family: 隶书 ; // 设 置 段落 字体 样式 
8 } 

际 </style> 

10 </head> 

11 <body> 

12 <h1>2008 中 国 经 济 发 展 形式 </h1> 

13 <p> 

14 从 宏观 上 说 ， 中 国 经 济 发 展 整 体形 势 良 好 。2008 年 国家 统计 局 公布 数据 为 上 半年 
15 ”国内 生产 总 值 130619 亿 元 

0 

本 </Ip> 

18 </body> 

19 </html> 


ss Raat 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 7.12 所 示 。 
ES 


Er TE 
立 件 们 。 往 弓 (日 ” 寺 喜 (V) 点 葵 志 (A) 工 生 MD) 大 有 (H) 
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从 观 上 识 ， 直 国 弛 济 生 虹 卫 体 形 热 请 好。2008 年 本 可 绽 计 局 公 
布 数 据 为 上 半年 四 内 主 广 总 介 130619 亿 和 欠 。 寺 可 比价 检 计算。 
鼎 培 长 10. 指 ， 比 上 不 网 其 回 笃 1. 8 个 百 分 点。 只 中 ， 理 一 产业 和 
苇 三 产业 增长 均 超 寺 10%。 从 这 个 数据 残 们 可 以 看 出 ， 中 国 经 济 基 


考 ， 没有 十 田 是 处 完美 的 。 


所 100 ~ 
图 7.12 使 用 CSS 修饰 文本 字体 


【深入 学 习 】 图 7.12 中 就 是 一 个 简单 的 页 面 文本 修饰 效果 ， 只 是 稍稍 地 做 了 一 点 字体 改变 ， 但 整 
个 页 面 看 起 来 已 经 略 有 不 同 ， 似 乎 是 一 张 散发 墨 香 的 报纸 。 


注意 : 如 有 果 不 确定 浏览 器 中 的 字体 ， 或 者 想 尝试 一 些 罕见 的 字体 ， 可 以 在 指定 的 字体 后 添加 备用 字体 ， 例 如 


font-family: "全 新 硬笔 行书 简 ", 宋 体 ; 
这 样 ， 如 果 浏 览 者 的 计算 机 中 没有 “全 新 硬笔 行书 简 ” 字 体 ， 浏 览 器 会 默认 改变 页 面 文本 为 
宋体 。 


7.3.2 文本 的 字号 


名 ma 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 7 章 \ 文 本 的 字号 .wmv 
font-size 属性 用 来 改变 文本 字体 的 大 小 。 在 规定 字体 大 小 的 时 候 ， 最 常见 的 有 3 种 表示 方法 ,也 可 
以 说 是 3 种 度量 方案 ， 分 别 是 px、em 和 %。 

像素 单位 px: 使 用 像素 直接 来 定义 字体 的 大 小 ， 绝 对 单位 ， 如 12px， 无 论 在 哪个 显示 器 中 ， 字 体 
的 大 小 只 会 相对 于 显示 设备 来 确定 。 

字体 大 小 em: 这 是 目前 较为 流行 的 一 种 定义 字体 大 小 的 方式 。 任 何 浏览 器 的 默认 字体 大 小 都 是 
lem。 用 户 可 以 根据 自己 的 喜好 定义 默认 字体 大 小 , 则 网 页 中 的 字体 大 小 就 可 以 弹性 地 随 着 改 
变 。 

百分比 %: 这 是 以 当前 文本 的 百分比 定义 尺寸 。 例 如 ，{font-size:200%} 是 指 文字 大 小 为 原来 的 2 
倍 。 在 页 面 制 作 中 ， 通 常 使 用 “%” 定 义 页 面 主体 的 初始 字体 大 小 ， 然 后 以 em 表示 字体 的 大 
小 ， 如 实例 7-7 所 示 为 改变 页 面 文字 大 小 的 方法 。 


注意 : 还 有 一 种 表示 单位 的 方式 为 pt，12pt=lem。 
【实例 7-7】 本 实例 介绍 CSS 修饰 文本 字体 大 小 的 方法 。 


re 实例 7-7: CSS 修饰 文本 字体 大 小 的 方法 
源码 路 径 : 光盘 '\ 源 文件 07\7-7html 


第 7 章 CSS 规则 


加 <title>CSS 修饰 文本 字体 大 小 </title> 

<style type="text/css"> 

向 body {font-size:80%; // 将 整个 页 面 的 字体 定义 为 标准 的 80% 

6 } 

区 h1 {font-family: 微 软 雅 黑 ; 

8 font-size:2em; // 将 页 面 标题 文本 字体 的 大 小 定义 为 2em 
9 } 

10 p {font-family: 隶书 ; 

11 font-size:1.5em; // 将 页 面 段落 文本 字体 的 大 小 定义 为 1.5em 
12 } 

le </style> 

14 </head> 

15 <body> 

16 <h1>2008 中 国 经 济 发 展 形式 </h1> 


<p> 
18 ”从 宏观 上 说 ， 中 国 经 济 发 展 整体 形势 良好 。2008 年 国家 统计 局 公布 数据 为 上 半年 国内 生产 总 
19 值 130619 亿 元 ， 


20 和 
21 </body> 
22 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 7.13 所 示 。 


oo 


(HO ecss np- cl cssmaxrrrs » 
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| 
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有 从 庆 观 上 说 ， 中 国 经 济 发 展 茎 体形 势 记 好 。2008 年 回 家 纲 计 

局 公布 数据 为 上 半年 国内 生产 总 值 130619 亿 元 ， 护 可比 价格 

计算 。 间 比 增长 10. 摘 ， 此 上 年 同期 回落 1.8 个 百分点 。 其 

中 ， 第 二 产业 和 节 二 产业 增长 均 超 过 10%。 从 这 个 数据 玖 们 可 


以 得 出 ， 中 国 经 济 基 础 伴随 的 是 中 国 综合 国力 和 国际 影响 力 
的 大 柱 提升 ， 当 今 国际 事务 ， 没 有 中 国 是 不 完美 的 


碟 100% 


图 7.13 CSS 修饰 文本 字体 大 小 


【深入 学 习 】 注 意 和 图 7.12 相 比 ， 这 个 页 面 的 文本 大 小 更 合理 ， 字 体 配 合 页 面 也 更 加 舒适 ， 使 页 
面 效 果 显 得 十 分 协调 。 所 以 在 设计 页 面 文本 时 ， 要 注意 标题 和 文章 内 容 的 大 小 对 比 。 


7.3.3 ”文本 段落 行 高 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 文 本 段落 行 高 .wmv 

可 以 使 用 line-height 进行 行 高 的 设 定 。 同 样 ， 段落 行 高 的 数值 也 可 以 通过 单位 px、em 和 百分比 来 设 
定 。lem 和 100% 代 表 正 常 的 行距 ， 所 以 用 em 单位 和 % 表 示 行 距 也 是 比较 好 的 选择 ， 如 实例 7-8 所 示 。 
置 的 方法 。 


ss 网 页 设计 主人 


| <html> 

2 <head> 

3 <title>CSS 修饰 文本 段落 行 高 </title> 

4 <style type="text/css"> 

5 body {font-size:80%; // 设 置 页 面 字体 的 大 小 
6 } 

区 h1 {font-family: 微 软 雅 黑 ; 

8 font-size:2em; // 设 置 标题 字体 的 大 小 
9 } 

10 .big {font-family: 隶书 ; 

i font-size:1.5em; 

12 line-height:1.5em; // 设 置 行 高 为 1.5em 
13 } 

14 .small {font-family: 隶书 ; 

15 font-size:1.5em; 

16 line-height:0.8em; // 设 置 行 高 为 0.8em 
17 } 

18 .normal {font-family: 隶书 ; 

19 font-size:1em; 

20 line-height:1em; // 设 置 行 高 为 lem 
21 } 

22 </style> 

23 </head> 

24 <body> 


25 <h1>2008 中 国 经 济 发 展 形式 </h1> 
26 <p class="big"> 从 宏观 上 说 ， 中 国 经 济 发 展 整体 形势 良好 。2008 年 国家 统计 局 公布 数 
27 ，” 据 为 上 半年 国内 生产 总 值 130619 亿 元 ， 


29 <p class="small"> 按 可 比价 格 计算 ， 同 比 增长 10.4%， 比 上 年 同期 回落 1.8 个 百分点 。 
30 ”其 中 ， 第 二 产业 和 第 三 产业 增长 均 超过 10%。 

31 ”<p class="normal"> 从 这 个 数据 我 们 可 以 看 出 ， 中 国 经 济 基础 伴随 的 是 中 国 综合 国力 和 
32 ”国际 影响 力 的 大 幅 提升 ， 当 今 国 际 事务 ， 没 有 中 国 是 不 完美 的 。 

33 </body> 

34 </html> 


【运行 程序 】 浏 览 该 区 页 面 ， 效果 如 图 7.14 所 示 。 
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从 宏观 上 说 ， 中 国 经 济 发 展 芷 体形 势 良 好。2008 年 国家 次 
计 局 公布 数据 为 上 半年 国内 生产 总 值 130619 化 元 ， 


将 本 作价 奖 妆 各 办 从 过 基 吉 .9 作风 入 1 9 个 
百分点 。 其 中 ， 第 二 产业 和 第 三 天 业 增长 均 超过 10%o 


估 拓 个 关 拓 天 计 可 以 者 出 ， 直 天 内 于 其 过 条 舌 加 生字 轨 于 醒 力 科 本 隔 名 江 力 的 大 条 
菇 年， 当今 于 际 字 务 ， 这 有 有 中 宝玉 不 本 的 。 


图 7.14 CSS 修改 段落 行 高 
注意 : 图 中 3 段 文本 行距 依次 对 应 为 1.5em、0.8em 和 lem。 
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【深入 学 习 】 留 意 代 码 中 第 10 一 20 行 ， 这 部 分 是 对 页 面 中 的 段落 文章 进行 设 定 ， 但 是 未 免 有 些 拖 
省 ， 更 好 的 方式 应 该 写成 : 


p {font-family: 隶书 ; 
font-size:1.5em; 


; 
p.big { line-height:1.5em /使 用 分 组 选择 器 样式 来 精简 代码 
} 
p.small{ line-height:0.8em // 使 用 分 组 选择 器 样式 来 精简 代码 
} 


这 样 使 用 分 组 样式 定义 ， 才 真正 意义 上 做 到 了 精简 页 面 的 代码 ， 灵 活 地 使 用 了 CSS 样式 表 。 
7.3.4 ”禁止 文本 自动 换行 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 禁 止 文本 自动 换行 .wmv 

大 部 分 互联 网 上 的 页 面 ， 都 是 禁止 页 面 内 容 自动 换行 ， 这 似乎 已 经 成 了 一 种 默认 的 许可 。 页 面 随 
着 浏览 器 的 大 小 自动 换行 确实 令 人 眼花 练 乱 ， 既 然 人 们 已 经 习惯 于 这 样 的 页 面 展 示 形 式 ， 那 么 就 将 这 
个 习惯 保持 下 去 。 通 过 white-space 属性 可 以 禁止 文本 自动 换行 ， 如 实例 7-9 所 示 为 禁止 文本 自动 换行 
的 方法 。 

【实例 7-9】 本 实例 介绍 禁止 文本 自动 换行 的 方法 。 


re 实例 7-9: 禁止 文本 自动 换行 的 方法 
源码 路 径 : 光盘 \ 源 文件 ,07\7-9.html 


1 
2 <head> 

3 <title> 禁 止 文本 自动 换行 </title> 

+4 <style type="text/css"> 

5 p {white-space: nowrap /nowrap 属性 指定 页 面 无 法 自动 换行 
6 四 

靶 </style> 

8 </head> 

9 


<body> 

10 ”<p> 历 史书 上 写 道 : 三 国 吴 王 孙权 派 1 万 官兵 到 达 “ 夷 洲 ”〔 台 湾 ) ， 吴 人 沈 莹 的 《临海 

11 ”水 土 志 》 留 下 了 世界 上 对 台湾 最 早 的 记述 。 隋 唐 时 期 (公元 589 一 618 年 ) 称 台湾 为 “ 流 求 ”。 
12 ” 隋 王 朝 曾 三 次 出 师 台湾 。 

13 </body> 

14 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 7.15 所 示 。 
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图 7.15 禁止 文本 自动 换行 


UMDYCSS 网 页 设计 详解 


所 以 ， 在 这 个 页 面 中 ， 当 使 用 white-space 时 ， 浏 览 器 中 的 页 面 不 会 因为 窗口 大 小 而 自动 换行 ， 而 
是 出 现 滚动 条 ， 使 用 滚动 条 来 查看 剩余 的 内 容 。 


说 明 : 此 外 ， 当 定义 为 white-space: pre 时 ， 其 作用 相当 于 <pre> 标 签 ( 参照 第 3 章 内 容 ) 。 


7.4 给 页 面 对 象 添加 颜色 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 7 章 \ 给 页 面 对 象 添加 颜色 .wmv 

在 第 5 章 中 已 经 介绍 了 颜色 的 基本 概念 ， 而 CSS 所 要 做 的 工作 ， 就 是 将 不 同 的 属性 作用 于 不 同 的 
HTML 页 面 对 象 ， 将 颜色 值 赋予 这 些 对 象 就 可 以 了 。CSS 中 主要 有 color 和 background-color 两 个 重要 
的 属性 。 准 确 地 说 ，color 属性 修改 其 对 象 前 景色 ， 而 background-color 则 修改 其 对 象 的 背景 色 。 通 过 
下 面 的 实例 可 以 很 好 地 说 明 前 景色 和 背景 色 的 概念 ， 如 实例 7-10 所 示 为 使 用 CSS 修饰 页 面 的 颜色 。 

【实例 7-10】 本 实例 介绍 了 使 用 CSS 修饰 页 面 颜色 的 方法 。 


实例 7-10: 使 用 CSS 修饰 页 面 颜色 的 方法 
源码 路 径 : 光盘 \ 源 文件 07\7-10.html 


1 

2 <head> 

习 <title> 使 用 CSS 修饰 页 面 颜色 </title> 
4 <style type="text/css"> 

际 body {color:white; 
6 

区 

8 

9 


background-color:black; 1/ 设置 页 面 背景 颜色 为 黑色 
font-family: 微 软 雅 黑 ; /设置 字体 的 样式 
font-size:1.2em; // 设 置 字体 的 大 小 
} 
10  h2 {background-color:green // 设 置 标题 文本 背景 颜色 为 绿色 
11 3 
12 pf{background-color:orange; // 设 置 段落 文本 背景 颜色 为 橙色 
13 } 
14 </style> 
15 </head> 
16 <body> 
他 <h2> 多 重 样式 表情 况 下 的 优先 级 </h2> 
18 <p> 多 重 样式 表情 况 下 的 优先 级 </p> 
19 </body> 
20 </html> 
i pe So a = 
【运行 程序 】 浏 览 该 页 面 ， 最 终 效果 如 图 7.16 所 示 。 DO rw css+l D - 0 | © scsi 
【深入 学 习 】 如 代码 第 5 行 和 第 6 行 所 示 ，body 样式 表 -一 一 


定义 了 页 面 背景 是 黑色 ， 而 文本 颜色 是 白色 。 然 而 也 要 注意 。 对 和 
代码 第 10 行 和 第 12 行 ， 分 别 定义 了 标题 文本 和 段落 文本 的 。 此 

背景 色 为 绿色 和 栖 色 。 可 以 发 现 ， 文 本 的 背景 部 分 变 成 了 对 
应 于 不 同 CSS 样式 表 作用 的 颜色 ， 分 别 是 绿色 和 村 色 。CSS 
中 ， 关 于 文本 和 页 面 背景 的 属性 很 多 ， 这 里 将 它们 列举 出 来 ， cr 
如 表 7.2 所 示 。 图 716 使 用 CSS 修饰 页 面 颜 色 
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表 7.2 修饰 页 面 文本 和 页 面 背景 的 属性 


属 性 说 明 
backeround 作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-color 设置 页 面 对 象 的 背景 颜色 
background-image 引用 图 像 设置 为 背景 
background-repeat 设置 背景 图 像 重 复 的 方式 
background-position 设置 背景 图 像 的 具体 位 置 
background-attachment 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 
color 设置 文本 颜色 
line-height 设置 行 高 
white-space 设置 元 素 中 段落 排版 的 方式 
word-spacing 设置 字 间 距 
font-famil 设置 文本 字体 
font-size 设置 字体 的 尺寸 
font-style 设置 字体 风格 
font-weight 设置 字体 的 粗细 
direction 设置 文本 方向 
letter-spacing 设置 字符 间距 
text-aligl 对 齐 页 面 中 的 文本 
text-decoration 向 文本 添加 下 划 线 
text-transform, 控制 元 素 中 的 字母 


技巧 : 准确 设置 文本 和 页 面 背景 的 属性 ， 可 以 让 文本 样式 更 加 漂亮 。 
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案例 : 使 用 CSS 制作 个 人 页 面 


铝 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 7 章 \ 案 例 : 使 用 CSS 制作 个 人 页 面 .wmv 

使 用 样式 表 可 以 更 容易 地 做 出 个 性 化 的 页 面 ， 良 好 的 习惯 是 先 在 纸 上 绘 制 出 页 面 的 草图 ， 根 据 草 
图 ， 制 定 需 要 的 CSS 样式 表 。 当 然 ， 还 要 准备 好 页 面 的 文字 资料 和 图 像 。 当 这 些 工作 都 完成 之 后 ， 接 
下 来 就 是 将 这 些 素材 拼接 在 一 起 。 在 这 个 例子 中 ， 表 现 的 是 一 个 个 人 主页 ， 并 没有 使 用 复杂 的 技术 ， 
仅仅 是 通过 使 用 图 像 ， 放 入 文本 这 样 的 技术 ， 如 实例 7-11 所 示 为 制定 个 人 页 面 。 

【实例 7-11】 本 实例 设置 的 是 一 个 个 人 页 面 。 


源码 路 径 : 光盘 \ 源 文件 \07\7-11.html 


忆 | 实例 7-11: 设置 一 个 个 人 页 面 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 


<title> 使 用 CSS 制作 个 人 页 面 </title> 
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HTML+CSS 网 页 设计 详解 
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<style type="text/css"> 

body {background-image:url( 图 片 /背景 .png); 
background-attachment:fixed; 1/ 设置 页 面 背景 图 像 放 置 方 式 
font-size:100%; 
} 

p {text-align:right; 
} 
.biaoti { text-align:right; 


color : #D35COF; 
font-size : 2.5em; // 设 置 字 体 的 大 小 
font-weight : bold; 
line-height : 1.4em; // 设 置 行 高 
font-family : Cooper Std Black; // 设 置 字体 
1 
#date { text-align:right; // 设 置 文本 对 齐 方式 
color : #999999; // 设 置 文本 颜色 
font-size : .8em; 
font-weight : bold; 
font-family : Geneva, Arial, Helvetica, sans-serif; 
} 
#content {color : #3399FF; // 设 置 文本 颜色 
font-size : 1em; 
line-height : 1.6em; // 设 置 行 高 
font-weight : bold; 
font-family : 幼 圆 ; 
white-space: pre; /保持 文本 格式 
} 
a:link {color : #6d2542; // 通 过 伪 类 修改 页 面 的 链接 状态 
text-decoration : none; 
} 


a:visited {color : #999999; 
text-decoration : none; 
} 
a:hover {color : #999999; 
text-decoration : underline; 
} 
a:active {color : #999999; 
text-decoration : none; 
} 
</style> 
</head> 
<body> 
<p><img src=" 图 片 /标题 .png" alt=" 标 题 " height="120" align="right"/> 
<p class="biaoti">JennyYuan 
<p id="date"><a href=" 后 退 .html">2013 年 3 月 12 日 </a></p> 
<p><hr align="right" width="45%" > 
<p id="content"> 
把 掌声 留 给 坚守 得 住 承诺 的 人 . 
毕竟 ,为 了 承诺 一 直 守 候 . 
多 辛苦 ,多 执着 ,多 浪漫 . 


58 The End 在 第 100 天 。 

59 </body> 

60 </html> 

【运行 程序 】 代 码 的 第 1 一 47 行 部 分 是 页 面 的 头 部 ， 主 要 包括 声明 代码 和 CSS 样式 表 的 制定 ， 而 
这 些 制 定 都 是 建立 在 已 确定 好 的 页 面 结 构 上 。 第 48 一 60 行 的 部 分 是 页 面 的 结构 代码 ， 效 果 如 图 7.17 
所 示 。 
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图 7.17 使 用 CSS 制作 个 人 页 面 


【深入 学 习 】 在 这 个 例子 中 , 页 面 结构 非常 简单 ， 由 代码 可 以 知道 ,几乎 都 是 用 <p> 标 签 来 排版 的 ， 
大 部 分 都 是 通过 CSS 来 实现 效果 。 设 计 这 样 的 页 面 时 ， 要 注意 字体 、 字 号 和 行距 的 设 定 ， 不 要 忽视 了 
这 些小 细节 ， 它 们 带 来 的 影响 是 非常 大 的 。 

代码 第 51 行 是 样式 表 和 伪 类 同时 作用 于 一 个 对 象 。 整 个 页 面包 含 了 HTML 样式 表 ， 如 第 49 行 和 
第 52 行 ， 以 及 嵌入 式样 式 表 的 引用 如 代码 第 50、51 和 53 行 。 不同 样式 表 的 引用 互相 配合 ， 相得益彰 。 

其 中 ， 第 8 一 13 行 属于 HTML 页 面 选 择 符 ， 第 14 一 20 行 是 类 选择 符 ， 第 21 一 33 行 是 id 选择 符 
第 34 一 45 行 是 典型 的 伪 类 选择 符 ， 用 于 设置 页 面 中 的 链接 状态 。 

当然 ， 这 个 页 面 代码 并 非 十 分 理想 。 由 于 CSS 样式 表 的 级 联 性 ， 样 式 表 之 间 容 易 由 上 级 对 下 级 产 
生 影 响 ， 这 样 在 编排 页 面 时 总 得 小 心 翼 翼 。 因 此 ， 在 页 面 设计 时 便 引 入 了 div 层 的 概念 。 层 的 概念 是 
用 来 封装 CSS 样式 表 ， 避 免 CSS 样式 表 之 间 出 现 错误 交叉 。 


说 明 : 层 的 学 习 将 在 后 面 的 章节 中 详细 介绍 。 


7.6 小 结 
本 章 是 关于 CSS 样式 表 的 学 习 ， 涉 及 的 概念 颇 多 ， 需 要 读者 用 心 去 理解 。 在 理解 的 基础 上 ， 才 能 


_ 加 ) 


对 CSS 运用 自如 。 本 章 需 掌握 的 知识 点 有 : 


CSS 的 写法 规则 ， 包 含 选择 符 、 属 性 和 属性 值 ， 如 “colorred; ”。 

选择 符 的 3 种 写法 ， 一 般 的 选择 符 、 以 “# ”开头 的 这 选择 符 ， 以 “.” 开 头 的 class 选择 符 。 

选择 器 的 6 种 样式 及 它们 的 作用 ，HTML 页 面 选择 器 、id 选择 器 、class 选择 器 、 派 生 选 择 器 、 分 
组 选择 器 和 伪 类 选择 器 。 

使 用 CSS 样式 表 的 3 种 方式 ， 即 行内 CSS、 嵌 入 式 CSS 和 外 联 式 CSS。 

CSS 中 文本 属性 的 介绍 。 

在 本 章 的 最 后 使 用 了 一 个 综合 例子 ， 结 合 各 式样 式 表 制 作 了 一 个 个 人 人 页面。 当然， 本 章 只 是 刚刚 


拉 开 CSS 的 序幕 ,在 第 8 章 中 ,将 介绍 如 何在 页 面 中 设计 表格 ， 以 及 如 何 通过 表格 来 表现 页 面 的 内 容 。 


7.7 本 章 习 题 


习题 7-1 使 用 CSS 嵌入 样式 表 和 id 选择 符 来 设置 网 页 中 文本 的 样式 ， 效 果 如 图 7.18 所 示 。 
【分 析 】 本 题 主要 考查 CSS 嵌入 样式 表 和 id 选择 符 的 使 用 。 
【关键 代码 】 

#myclass {color:red;} 

#youclass {text-decoration:underline;} 

习题 7-2 使 用 CSS 伪 类 来 设置 文本 超 链 接 不 同 状态 下 的 不 同样 式 ， 效 果 如 图 7.19 所 示 。 
【分 析 】 本 题 主要 考查 CSS 伪 类 选择 器 的 使 用 。 
【关键 代码 】 

a:visited {color:#63F:; font-size: 20px;} 


a:hover { color: #000000;font-size:20px;} 
ailink {color:#6FF.font-size: 20px;} 


lo pm 
See /mo - | 
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未 访问 过 的 超 链 覆 
已 访问 过 的 超 链 僚 
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7.18 设置 文本 样式 7.19 使 用 CSS 伪 类 设置 超 链接 样式 


习题 7-3 ”在 网 页 中 添加 文本 ， 并 设置 标题 字体 为 隶书 ， 段 落 内 容 为 黑体 ， 效 果 如 图 7.20 所 示 。 
【分 析 】 本 题 主 要 考查 font-family 属性 的 使 用 。 
【关键 代码 】 


h2{font-family:" 华 文 隶书 ":} 
pf font-family:" 黑 体 ";} 


习题 7-4 在 网 页 中 添加 两 段 文 本 ， 其 中 设置 第 一 段 文本 字号 为 14px， 行 高 为 0.7em; 第 二 段 文本 


@ 


和 7 地 CS 


字号 为 1.5em， 行 高 为 10px。 效 果 如 图 7.21 所 示 。 
【分 析 】 本 题 主 要 考查 font-size 和 line-height 属性 的 使 用 。 


【关键 代码 】 
.C1 { line-height:0.7em; 
font-size:14px:} 
.C2{ line-height:24px; 
font-size:1.2em;} 
ee (DE oe ces ~ 
SE ET wc > J Te 文 必 个。 半 后 日 疏 竺 关内 工 呈 (1) 帮助 中 
ET CE ED | 2008 中 国 经 济 发 展 形式 
荷花 介绍 和 0 局 公布 则 插 为 上 半年 
| 六 放生 于 相合 下 车 科 演 生 生 丰 后 革 友 花 序 5 地 接 可 比价 格 计算 ， 同 比 漠 长 10. 4%， 比 上 年 同期 回 沙 1. 8 个 百 
生生 和 3 分 点 。 其 中 ， 第 二 产业 和 第 三 产业 增长 均 超过 10%。 
赎 100% ~ 态 100% 


图 7.20 设置 文本 字体 图 7.21 设置 文本 字号 和 行 高 
习题 7-5 ”在 页 面 中 添加 一 段 文本 ， 设 置 文本 颜色 为 红色 ， 文 本 背景 色 为 蓝 色 ， 效 果 如 图 7.22 


所 示 。 
a Es) 
(OE Remicss-h D - 0 © escsemsriant 
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态 100% ~ 
图 7.22 设置 文本 颜色 


【分 析 】 本 题 主要 考查 CSS 中 background-color 和 color 属性 的 使 用 。 
【关键 代码 】 


h4{background-color:#0FF; 
color#C00; 


} 


第 8 章 表 格 


没有 CSS 之 前 ， 表 格 是 最 流行 的 布局 页 面 的 方式 。 它 表示 一 种 布局 页 面 的 方法 ， 而 不 仅仅 只 是 
指 单元 格 组 成 的 表格 。 现 在 谈论 Web 设计 时 ， 再 说 到 “表格 ”， 则 是 一 个 普通 的 由 单元 格 组 成 的 
表格 。 

生活 中 经 常 需要 使 用 到 表格 ， 虽 然 现在 表格 的 使 用 频率 大 不 如 前 ， 但 是 它 还 是 页 面 设计 中 不 可 或 
缺 的 一 个 元 素 。 在 一 些 服务 性 网 站 中 ， 经 常 需要 使 用 表格 来 传递 信息 给 浏览 者 ， 方 便 用 户 下 载 ， 如 电 
信 公 司 的 话费 单 等 。 本 章 的 主要 知识 点 如 下 。 

学 习 制 作 表 格 。 

修饰 表格 的 单元 格 。 

拆 分 合并 表格 。 

使 用 CSS 样式 表 来 表现 表格 。 

表格 的 实际 应 用 。 


8.1 理解 页 面 中 的 表格 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 理 解 页 面 中 的 表格 .wmv 
表格 看 上 去 虽然 只 是 由 一 个 一 个 小 格子 组 成 , 但 是 , 谈 及 在 HTML 人 二 


中 制作 表格 ， 远 远 不 是 看 上 去 的 那么 直接 。 表 格 涉及 的 属性 很 多 ， 因 390 sgn 38V oR 

为 人 们 在 表述 表格 时 ， 不 是 说 “ 某 某 表格 左上 角 的 那个 格子 ”， 而 是 | 

通过 描述 某 一 行 和 某 一 列 来 定位 某 个 单元 格 的 位 置 ， 这 里 就 已 经 描述 EPE 

了 3 个 属性 。 一 个 普通 的 表格 在 页 面 中 的 样式 如 图 8.1 所 示 。 一 
这 是 一 个 3X3 的 表格 ， 横 排 为 行 ， 竖 排 为 列 ， 每 一 个 格子 称 为 am 

是 二 图 8.1 一 个 普通 的 表格 


注意 : 在 HTML 页面 中 不 仅仅 是 定义 表格 行列 的 数量 ， 还 可 以 设 定 表 格 的 边框 的 样式 、 单 元 格 的 宽 高 ， 
以 及 单元 格 彼此 之 间 的 距离 。 所 以 在 HTML 页 面 中 ， 编 辑 表格 是 一 项 不 困难 却 很 烦琐 的 工程 。 


8.2 普通 表格 的 应 用 


类 似 于 课程 表 、 出 勤 表 或 者 价目 表 这 种 形式 的 表格 都 是 普通 表格 ， 被 使 用 的 频率 很 高 。 因 此 ， 如 
果 只 是 针对 于 简单 的 文本 内 容 ， 仅 需要 将 这 些 内 容 横 排 或 者 竖 排 ， 那 么 表格 是 一 种 比较 好 的 形式 。 


8.2.1 制作 普通 表格 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 制 作 普通 表格 .wmv 
表格 属于 结构 性 标签 ， 使 用 <table> 标 签 来 进行 创建 。 一 个 最 简单 的 表格 也 需要 具备 表 头 、 行 和 列 
的 信息 。 其 代码 如 下 : 


<table > 

<tr> 
<th>Head1</th> 
<th>Head2</th> 

</tr> 

<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 

</tr> 

<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 

</tr> 


<Hable> 
这 样 看 代码 真 的 很 难 想象 这 个 表格 是 什么 样子 ， 如 果 用 表格 的 形式 去 表达 这 段 代 码 ， 则 效果 如 
图 8.2 所 示 。 
通过 和 表格 实体 的 对 比 ， 可 以 明白 此 前 的 代码 表示 的 是 一 个 3X2 的 表格 ， 而 <table> 标 签 封装 了 一 
个 表格 。 在 HTML 中 ， 首 先 用 <tr> 来 定义 行 ， 如 这 里 有 3 行 ，<table> 标 签 中 即 先 定义 3 组 <tr> 标 签 。 
接着 用 <td> 来 定义 每 一 个 单元 格 ，<th> 表 示 的 是 表 头 单元 格 ， 所 以 ， 不 仅 每 一 行 都 要 描述 清楚 ， 而 且 
每 一 个 单元 格 也 要 逐一 定义 。 
说 明 : 如 果 不 希 望 有 表 头 行 ， 可 以 省 去 <th> 标 签 。 此 外 ， 正 浏览 器 会 默认 隐藏 空 单 元 格 ， 即 如 “<td></td>”。 
如 果 中 间 没 有 内 容 ， 最 后 显示 的 效果 会 很 奇怪 。 所 以 最 好 放 入 一 个 空格 占 位 ， 如 
“<td>&nbsp;</td>” 


当然 , 表格 的 代码 也 可 能 写成 如 下 形式 , 这 是 以 列 为 表 头 的 表格 , 其 效果 如 图 8.3 中 上 半 部 分 所 示 。 


<table> 
<tr> 
<th>Head1</th> 
<td>row1，cell2</th> 
</tr> 
<tr> 
<th>Head2</th> 
<td>row 2, cell 2</td> 
</tr> 
<tr> 
<th>Head3</th> 
<td>row 3, cell 2</td> 


或 者 也 可 以 写成 如 下 代码 ， 将 第 一 组 的 <tr> 标 签 内 的 对 象 全 部 定义 为 表 头 。 此 后 每 一 组 <tr> 标 签 内 
的 第 一 个 标签 定义 为 <th> 标 签 ， 即 之 后 的 每 一 行 的 第 一 个 单元 格 表示 为 表 头 。 这 样 就 是 分 别 以 行 和 列 
的 第 一 个 单元 格 作为 表 头 。 


<table> 
<tr> 
<th>Head1</th> 
<th>HEAD1</th> 
</tr> 
<tr> 
<th>Head2</th> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<th>Head3</th> 
<td>row23, cell 2</td> 
</tr> 
</table> 


这 样 每 一 个 行 的 第 一 个 单元 格 被 认为 是 表 头 ， 如 图 8.3 中 下 半 部 分 所 示 。 


以 列 为 表 头 的 表格 


tr | th Beadl | th Head2 | Bean Fowl, cen? 
| Head? |row2, celi2 
tr ka rorl, cell1 td rov1, cell2 
| Head3 |row3. ccll2 
以 行 和 列 的 第 一 个 单 
tm 元 格 作为 表 头 
<th>Head1</th> 
<th>Head2</th> Headl HEAD1 
ch 
<tr> 四 
<td>row 1, cell 1</td> Head2 |rovw 1, cell 2 
<td>row |, cell 2</d> 
chtr> Head3 ||row23, cell 2 


图 8.2 表格 的 代码 形象 化 比较 图 8.3 表 头 的 样式 


8.2.2 ”表格 的 基本 属性 


嫩 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 表 格 的 基本 属性 .wmv 
表格 的 基本 属性 就 是 指 表格 的 行 、 列 和 单元 格 ， 但 并 不 是 每 一 个 表格 的 单元 格 都 是 统一 的 大 小 ， 
所 以 这 就 需要 设计 者 通过 一 些 属性 参数 去 修改 表格 的 样子 ， 让 它们 可 以 变 得 更 具 多 样 性 。 


1. 行 高 height 属性 
默认 情况 下 ， 一 个 空白 表格 的 单元 格 是 平均 分 配 的 ， 所 以 如 果 需 要 自 定义 行 高 ， 可 以 使 用 height 


他 


和 未 


属性 来 设置 每 一 行 单元 格 的 行 高 。 可 以 使 用 CSS 样式 表 先 定义 table， 然 后 定义 也 或 者 tr。 若 想 改变 
图 8.2 中 表格 的 表 头 行 高 ， 则 样式 表 应 该 写 为 如 下 形式 。 
注意 : 表格 中 的 内 容 会 自动 影响 到 单元 格 的 大 小 分 配 。 


<style type="text/css"> 
table {height:185px:; 


bh 
table th {height:32px; 


bh 
</style> 
当 使 用 这 个 CSS 时 ， 效 果 如 图 8.4 所 示 。 


DD weerc ya Doe PD - © | BE csersyaoa 


{ E 
AA = 
文件 四。 如 日。 宣 看 (V】 站 葬 A) 工具 [帮助 (H) 


| Headl Head2 32px 


[row 1, cell 下 or 1, cell a 185px 


|: cell 1leor 2, ce a 


lo0% ~ 


图 8.4 表格 行 高 
注意 : 因为 表格 中 只 有 一 个 表 头 ， 即 <th>， 所 以 才 可 以 定义 样式 表 为 “table 也 {}”。 如 果 要 定义 普通 
行 <t>， 那 么 应 该 选择 其 他 定义 方式 ， 如 可 以 定义 为 “#tl10”， 通 过 “<tr id="rl">” 绑 定 到 对 


象 。 


2. 宽度 width 属性 
如 果 只 是 需要 修改 表格 列 的 宽度 ， 只 使 用 width 属性 就 可 以 了 。 但 是 不 同 于 行 高 的 是 ， 表 格 中 的 


宽度 是 针对 整个 表格 或 者 每 一 个 单元 格 的 ， 所 以 像 下 面 这 样 的 写法 是 错误 的 : 


table {width:400px; 


table th {width:100px; 


} 
表格 的 宽度 并 不 会 改变 。 这 是 因为 表格 中 一 行 有 多 个 单元 格 ， 浏 览 器 无 法 辨认 解析 代码 指定 的 是 


哪 一 个 单元 格 的 宽度 。 而 由 于 这 一 行 无 论 有 多 少 个 单元 格 ， 它 们 的 行 高 始终 是 相同 的 ， 所 以 设置 行 高 
时 会 出 现 问题 。 为 了 避免 出 现 这样 的 错误 ， 这 里 使 用 一 种 更 方便 的 方法 ， 如 实例 8-1 所 示 为 修改 表格 


的 宽度 。 
【实例 8-1】 本 实例 介绍 修改 表格 宽度 的 方法 。 


| 区 上 有、 | ”实例 8-1: 修改 表格 宽度 的 方法 
-源码 路 径 : 光盘 \ 源 文件 08\8-1htmL 


ss Raat 


四 <title> 设 定 表格 的 宽度 </title> 
3 </head> 
4 <body> 
三 <table height="168" border= "1 > 
6 <tr> 
区 <td width="144">Head1</th> // 通 过 表 头 来 设置 表格 单元 格 的 宽度 
8 <td width="240">Head2</th> 
9 </tr> 
10 <tr> 
11 <td >row 1, cell 1</td> 
从 <td>row 1, cell 2</td> 
13 </tr> 
14 <tr> 
15 <td >row 2, cell 1</td> 
16 <td>row 2, cell 2</td> 
(人 </tr> 
18 </table> 
19 </body> 
【运行 程序 】 这 样 表格 宽度 就 改变 了 ， 效 果 如 图 8.5 所 示 。 
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8.5 修改 表格 的 宽度 
3. 单元 格 大 小 属性 height 和 width 
单元 格 的 大 小 其 实 就 是 由 高 和 宽 两 个 因素 组 成 的 。 所 以 如 果 要 准确 定位 一 个 单元 格 的 具体 大 小 ， 
这 两 个 因素 是 缺 一 不 可 的 ， 必 须要 同时 具备 ， 这 样 才能 定位 每 个 单元 格 的 大 小 。 


说 明 : 修改 行 高 时 使 用 了 HTML 页 面 选择 器 ， 修 改 宽 度 时 选择 使 用 了 页 面 内 修改 表格 的 属性 。 在 这 两 
种 方法 中 ， 后 者 更 适合 使 用 。 


8.2.3 合并 单元 格 


鳄 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 合 并 单元 格 .wmv 

合并 同行 单元 格 使 用 colsplan 属性 。 在 需要 修改 的 那 一 行 中 ， 先 删除 多 余 的 单元 格 ， 这 是 重要 的 
一 步 ， 如 果 删 错 了 单元 格 ， 很 可 能 最 后 呈现 的 表格 会 面目 全 非 。 这 之 后 再 定义 合并 的 单元 格 。 合 并 同 
列 的 单元 格 使 用 rowspan 属性 ， 这 里 介绍 一 种 合并 单元 格 的 方法 ， 如 实例 8-2 所 示 。 

【实例 8-2】 本 实例 介绍 合并 单元 格 的 方法 。 


全 


:| <html> 

> <head> 

3 <title> 合 并 表格 中 单元 格 </title> 
4 </head> 

5 <body> 

6 <h3> 普 通 的 表格 </h3> 

汤 <table width="305" height="156" border="1"> /设置 表 格 的 长 宽 ， 边 框 的 粗细 
8 <tr> 

a <td width="70" height="50">1</td> 
10 <td width="70">2</td> 

11 <td width="70">3</td> 

12 <td width="70">4</td> 

13 </tr> 

14 <tr> 

15 <td height="50">5</td> 

16 <td>6</td> 

17 <td>7</td> 

18 <td>8</td> 

19 </tr> 

20 <tr> 

21 <td height="50">9</td> 

22 <td>10</td> 

23 <td>11</td> 

24 <td>12</td> 

25 </tr> 

26 </table> 


27 ”<p><h3> 合 并 表格 单元 格 后 </h3></p> 
28 <table width="305" height="156" border="1"> 


29 <tr> 
30 <td height="50" colspan="2">1&amp;2</td> <!-- 合 并 同行 单元 格 --> 
31 <td width="70">3</td> 

32 <td width="70" rowspan="3">4&amp;8&amp;12</td> <!-- 合 并 同 列 单元 格 --> 
33 -</tr> 

34 <tr> 

35 <td height="50" width="70">5</td> 

36 <td width="70">6</td> 

yg <td>7</td> 

38 </tr> 

39 <tr> 

40 <td height="70">9</td> 

41 <td>10</td> 

42 <td>11</td> 

43 <tr 

44 </table> 

45 </body> 

46 -</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 8.6 所 示 。 
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普通 的 表格 


图 8.6 合并 表格 单元 格 


【深入 学 习 】 留 意 对 比 代码 中 对 应 页 面 的 不 同 编号 表格 的 位 置 。 合 并 单元 格 ， 这 是 一 个 不 错 的 方 
法 。 首 先 编排 好 单元 格 的 序号 ， 根 据 希望 合并 的 某 些 位 置 的 单元 格 ， 删 除 对 应 序号 的 单元 格 。 如 要 合 
并 1 号 和 2 号 单元 格 ， 则 要 先 删除 2 号 单元 格 ， 在 代码 中 表现 为 第 10 行 代码 。 之 后 再 定义 将 1 号 和 2 
号 单元 格 同行 内 合并 。 同 样 ， 合 并 一 列 中 的 单元 格 也 是 这 样 。 本 例 中 注意 第 30 行 和 第 32 行 代码 的 
colsplan 和 rowspan 的 用 法 。 


注意 : 如 果 合 并 错误 位 置 的 单元 格 ， 则 colspan 和 rowspan 不 起 作用 。 


8.2.4 ”表格 标题 


镶 ml 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 表 格 标题 .wmv 
表格 标题 是 一 个 表格 的 内 容 的 总 结 ， 通 常 被 居中 显示 在 表格 的 上 方 。<caption> 标 签 是 用 来 定义 表 
格 的 标题 的 ， 它 必须 紧 随 <table> 标 签 之 后 ， 并 且 每 个 表格 只 能 定义 一 个 标题 。 其 语法 结构 如 下 ; 


<table> 

<caption> 表 格 的 名 字 </caption> 

<caption> 表 示 标 签 添加 的 标题 ， 默 认 情 况 下 在 表格 上 方 居 中 的 位 置 ， 它 会 根据 不 同 表格 的 宽度 来 
改变 位 置 。 
8.2.5 ” 拆 分 表格 

鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 拆 分 表格 .wmv 


为 了 便于 将 表格 定位 给 CSS 样式 表 , 有 时 候 不 希望 代码 中 一 直 都 是 <tr> 标 签 , 可 以 使 用 thead、 tfoot 
和 tbody 来 拆 分 表格 。thead 定义 了 表格 的 首 行 ，tfoot 定义 了 表格 的 尾行 ，tbody 定义 了 表格 的 主体 部 


@®. 


分 。 有 趣 的 是 ， 如 果 使 用 了 其 中 一 个 ， 那 么 全 部 元 素 都 要 用 上 ， 而 且 它们 的 出 现 次 序 是 thead、tbody、 
tfoot， 如 下 所 示 : 


<table > 
<thead> 
<tr> 
<td>thead</td> 
<td>thead</td> 
</tr> 
</theadt> 
<tbody> 
<td>tbody</td> 
<td>tbody</td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td>tbody</td> 
<td>tbody</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td>tfoot</td> 
<td>tfoot</td> 


说 明 : tbody 可 以 出 现 多 次 ， 但 是 thead 和 tfoot 只 能 使 用 一 次 。 


使 用 这 种 写法 还 有 个 优点 ， 即 如 果 工 作 中 制作 被 菜 些 表格 长 度 超出 一 页 的 范畴 时 ， 打 印 表格 的 时 
候 ， 表 格 的 表 头 和 页 脚 将 会 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 


8.2.6 设置 表格 的 列 


鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 8 章 \ 设 置 表格 的 列 .wmv 

虽然 HTML 页 面 中 表格 是 按照 一 行 一 行 这 样 的 概念 建立 起 来 的 ， 但 是 可 以 使 用 <colgroup> 定 义 表 
格 列 的 分 组 。 这 个 标签 常 和 其 他 两 个 标签 配合 用 ， 一 个 是 <col> 标 签 ， 一 个 是 <span> 标 签 。<col> 标 签 表 
示 为 表格 中 一 个 或 多 个 列 定义 属性 值 ， 是 仅 包含 属性 的 空 元 素 ， 只 能 在 表格 或 colgroup 中 使 用 此 元 素 。 
如 实例 8-3 中 使 用 的 <colgroup> 和 <col> 定 义 表格 的 列 。 

【实例 8-3】 本 实例 介绍 如 何 使 用 <colgroup> 和 <col> 定 义 表格 的 列 。 


re 实例 8-3: 使 用 <colgroup> 和 <col> 定 义 表格 的 列 
源码 路 径 : 光盘 \ 源 文件 08\8-3.html 


1 <html> 
区 <head> 
3 <title> 使 用 <colgroup> 和 <col> 定 义 表格 的 列 </title> 


ENMUHCSS 网 页 设计 详解 


<style type="text/css"> 

5 caption { font-weight:bold; color:#000; } 

6 /通过 样式 表 来 修饰 表格 */ 

也 .One { background:cyan; text-align: center; } 
8 ‘two { background:ffee22; text-align: center; } 


9 .three { background: silver; text-align: center; } 

10 .four{ background: #F1B005; text-align: center; } 
yk! </style> 

12 </head> 

13 <body> 


14 <table width="500" height="280" border="1"> 
15 <caption> 使 用 "colgroup" 和 "col" 定 义 表 格 的 列 


16 </caption> 

1 <colgroup class="one"></colgroup> ”<!-- 定 义 表格 的 列 --> 
18 <colgroup> 

19 <col class="two"></col> 

20 <col class="three"></col> 

21 <col class="four"></col> 

22 </colgroup> 

23 

24 <tr> 


25 <th> 排 名 </td> 
26 <th> 金 牌 </th> 
rah <th> 银 牌 </th> 
28 <th> 铜 牌 </th> 


29 </tr> 

30 <tr> 

31 <td> 中 国 </td> 
32 <td>51</td> 
33 <td>21</td> 
34 <td>28</td> 
35 <tr> 

36 <td> 美 国 </td> 
37 <td>36</td> 
38 <td>38</td> 
39 <td>36</td> 
40 </tr> 

41 <tr> 

42 <td> 俄 罗斯 </td> 
43 <td>23</td> 
44 <td>21</td> 
45 <td>28</td> 
46 </tr> 

47 </table> 

48 </body> 

49 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 8.7 所 示 。 
注意 : 这 里 可 以 看 到 ， 表 格 标题 是 在 表格 上 方 居 中 的 位 置 。 
【深入 学 习 】 这 是 一 个 使 用 CSS 样式 表 来 改变 表格 列 的 背景 颜色 ， 当 在 <style> 标 签 中 定义 好 了 4 


他 


个 样式 表 之 后 ， 把 <colgroup> 和 <col> 放 在 一 起 ， 调 用 这 些 样式 表 来 改变 表格 中 每 一 列 的 颜色 。 
此 外 ， 还 可 以 和 span 属性 配合 使 用 ， 那 么 代码 应 该 写成 : 


<table> 
<colgroup span="3" class="one" 
</ colgroup> 


这 种 方法 不 同 于 前 一 种 的 是 它 表示 前 3 列 , 而 不 是 第 3 列 ,所 以 最 后 在 页 面 中 的 结果 如 图 8.8 所 示 。 
(= [= 
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使 用 "colsroup” 和 “col ”定义 表 略 的 列 使 用 “colgroup“ 和 “col“ 定 义 表 阁 的 列 
夺 100% 一 LL. 100% ~ 
图 8.7 使 用 colgroup 定义 表格 的 列 图 8.8 使 用 span 定义 表格 的 列 


8.3 修饰 单元 格 


当 了 解 了 表格 的 构建 原理 之 后 ， 下 一 步 该 讨论 的 就 是 如 何 使 设计 的 表格 更 美观 一 些 。 表 格 是 由 一 
个 一 个 的 单元 格 组 成 ， 美 化 表格 的 要 点 就 在 于 如 何 美化 这 些 单 元 格 。 谈 到 修饰 ， 最 好 的 方法 还 是 使 用 
样式 表 。 设 计 者 可 以 利用 很 多 优秀 的 属性 彻底 改变 表格 的 样式 。 


8.3.1 通过 CSS 修饰 单元 格 的 边框 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 8 章 \ 通 过 CSS 修饰 单元 格 的 边框 .wmv 

修改 边框 可 以 使 用 border 属性 ， 其 不 仅仅 可 以 修改 边框 的 粗细 ， 也 能 修改 边框 的 颜色 和 样式 。 默 
认 情 况 下 ,边框 的 值 是 0， 即 没有 边框 。 边框 颜色 和 文本 颜色 默认 情况 下 是 相同 的 。 一 个 标准 的 边框 定 
义 在 样式 表 中 可 以 写成 这 样 : 

border:2px solid red; 


表示 边框 的 宽度 是 2px， 红 色 实 体 的 线 。 具 体 如 何 使 用 到 表格 中 ， 如 实例 8-4 所 示 。 
【实例 8-4】 本 实例 介绍 修改 表格 边框 的 方法 。 


re 实例 8-4: 介绍 修改 表格 边框 的 方法 
源码 路 径 : 光盘 \ 源 文件 ,08\8-4.html 


+CSS 网 页 设计 详解 


:| <html> 

4 <head> 

3 <title> 修 改 表格 的 边框 </title> 

4 <style type="text/css"> 

5 table {border:5px blue; /| 设置 表格 边框 样式 

6 } 

区 .dotted {border: 3px dotted; // 宽 3px， 点 状 的 边框 
8 上 

9 .dashed {border: 3px dashed; // 宽 3px， 断 断 续 续 的 边框 
10 } 

11 .double {border: 3px double; // 宽 3px， 双 线 的 边框 
他 } 

13 groove {border: 3px groove; // 宽 3px， 外 阴影 的 边框 
14 } 

Rb </style> 

16 </head> 

17 <| 

18 <table width="462" height="242" border="2"> 

19 <tr> 

20 <td class="dotted">dotted</td> 

El <td class="dashed">dashed</td> 

22 </tr> 

23 <tr> 

24 <td class="double">double</td> 

5 <td class="groove">groove</td> 

26 </tr> 

27 </body> 

28 -</html> 


【运行 程序 】 本 实例 介绍 了 如 何 使 用 样式 表 作 用 于 表格 的 边框 ， 同 时 也 展示 了 不 同 边框 的 样式 粗 


细 颜 色 ， 效 果 如 图 8.9 所 示 。 
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图 8.9 表格 边框 的 样式 


说 明 : 为 了 节约 页 面 ， 这 个 例子 中 只 列 出 了 其 中 4 种 边框 的 代码 写法 ， 而 图 中 8 种 样式 边框 的 源码 可 以 
在 本 书 光盘 中 查找 到 。 


的 


的 。 
压 ” 


入 8 志 未 和 5 计 训 


【深入 学 习 】 此 外 ， 设 计 者 还 可 以 分 别针 对 一 个 单元 格 的 每 一 条 边 进 行 定义 ， 如 果 这 样 写 : 

{ border-left:2px dotted; } 
那么 在 浏览 器 中 ， 这 个 声明 值 针 对 于 左边 的 边框 。 依 此 类 推 ， 还 有 border-top 、border-right 和 
border-bottom， 分 别 表示 单元 格 的 上 边 、 右 边 和 底 边 。 
8.3.2 ”合并 相 邻 单元 格 


久 中 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 合 并 相 邻 单元 格 .wmv 

<table> 标 签 制定 的 表格 会 在 所 有 的 单元 格 之 外 再 框 上 一 个 四 边 形 ， 而 每 一 个 单元 格 又 是 独立 存在 
所 以 单元 格 和 单元 格 之 问 总 像 是 有 一 条 缝隙 ， 有 一 种 方式 可 以 消除 这 条 缝隙 ， 就 是 使 用 “边框 挤 
的 属性 border-collapse， 代 码 如 下 : 


{ border-collapse: collapse;} 


将 它 运 用 于 表格 中 ， 如 实例 8-5 所 示 。 
【实例 8-5】 本 实例 介绍 合并 单元 格 之 间 的 边框 的 方法 。 


源码 路 径 : 光盘 \ 源 文件 ,08\8-5 html 


<head> 
<title> 修 改 表格 的 边框 </title> 
<style type="text/css"> 
<caption> 合 并 单元 格 之 间 的 边框 
</caption> 
table.one {border-collapse: collapse; 
border:#0099CC 
} 
</style> 
</head> 
<body> 


<table width="191" height="129" border="2" class="one. 


<tr bordercolor="#0099CC"> 
<td width="87">Hui</td> 
<td width="86">Bobo</td> 

</tr> 

<tr bordercolor="#0099CC"> 
<td>Huiji</td> 
<td>Jhn</td> 

</tr> 
</table> 
</body> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 8.10 所 示 。 


败 | 实例 8-5: 介绍 合并 单元 格 之 间 的 边框 的 方法 


"> 


图 8.10 合并 单元 格 之 间 的 边框 


【深入 学 习 】 这 样 , 单元 格 和 单元 格 之 间 的 缝隙 就 消除 了 .边框 挤 压 ? 还 可 以 写成 < {border-collapse: 
separate;}”， 表 示 为 单元 格 之 间 分 离 。 


注意 : 还 有 一 个 border-spacing 属 性 具有 “边框 挤 压 ”的 类 似 功能 ， 使 用 它 可 以 控制 单元 格 之 间 的 距离 ， 
但 是 很 可 惜 ， 这 一 属性 并 不 能 被 一 些 主流 浏览 器 接受 ， 如 IE、 火 狐 浏 览 器 。 


8.4 编辑 单元 格 中 的 内 容 


表格 是 由 许多 个 单元 格 组 成 ， 而 这 些 单元 格 中 又 可 以 放 入 多 种 类 型 的 页 面 内 容 ， 如 文本 、 图 像 或 
者 超 链 接 等 ， 甚 至 可 以 再 放 入 新 的 表格 。 这 种 表格 的 嵌 套 曾经 是 非常 流行 的 布局 页 面 的 方法 ， 只 是 这 
种 方法 太 过 繁琐 。 通 过 样式 表 来 修饰 表格 中 的 内 容 就 容易 多 了 。 


8.4.1 单元 格 中 文本 与 单元 格 大 小 


名 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 单 元 格 中 文本 与 单元 格 大 小 .wmv 

单元 格 的 大 小 会 随 着 格 内 文本 的 长 度 自行 缩放 。 虽 然 通 过 数值 可 以 固定 单元 格 的 大 小 ， 但 是 如 果 
文本 的 长 度 超过 所 设置 的 单元 格 长 度 ， 那 么 依然 会 根据 文本 的 长 度 来 决定 。 使 用 table-layout 属性 可 以 
限制 单元 格 随 文 本 长 度 而 改变 ， 代 码 如 下 : 


{table-layout : fixed;} 


这 样 带 来 的 好 处 是 浏览 器 可 以 更 快 地 泻 染 出 表格 。 因 为 当 浏 览 器 解析 到 表格 的 第 一 行 时 ， 就 能 确 
定 所 有 单元 格 的 大 小 。 使 用 时 ， 需 要 在 代码 中 给 出 确定 的 长 度数 值 ， 如 第 一 行 的 td 或 者 也 ， 如 实例 8-6 
所 示 为 如 何 限 制 单元 格 的 大 小 。 

【实例 8-6】 本 实例 介绍 限制 单元 格 大 小 的 方法 。 


区 实例 8-6: 限制 单元 格 大 小 的 方法 
源码 路 径 : 光盘 \ 源 文件 \08\8-6.html 


4 | 
4 <head> 

3 <title> 限 制 单元 格 大 小 </title> 

4 <style type="text/css"> 

5 table {table-layout : fixed; /表格 单 元 格 的 限制 


第 8 章 表格 下 


6 

周 </style> 

8 </head> 

9 <body> 

10 <table border="2"> 

xi <tr> 

12 <td width="100" > 页 面 文本 1</td> <!- 设 置 单元 格 宽度 为 100px--> 
413 <td width="100" > 页 面 文本 2</td> 

14 </tr> 

15 <tr> 

16 <td > 博客 社 博客 社 博客 社 博客 社 博客 社 </td> 
i <td ></td> 

18 </tr> 

19 </body> 

20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 8.11 所 示 。 


图 8.11 限制 单元 格 大 小 
说 明 : 有 些 浏 览 器 不 能 很 好 地 支持 table-layout 属 性 ， 所 以 使 用 的 时 候 注意 。 


8.4.2 ”修饰 单元 格 中 的 内 容 


名 和 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 修 饰 单元 格 中 的 内 容 .wmv 
通过 CSS 定义 单元 格 中 的 文本 时 ， 可 以 专门 地 指定 某 一 行 、 某 一 列 ， 或 者 是 整个 表格 ， 如 文本 颜 
色 、 背 景 和 背景 图 片 等 。 例 如 : 
td { text-align:center; 
font:.7em 幼 圆 ; 
Color:#334542; 


background-color:#ddd; 
} 


样式 表 中 可 放 入 的 属性 有 很 多 , 也 有 一 些 是 专门 的 属于 表格 的 样式 表 ， 如 表 8.1 所 示 ， 有 兴趣 的 读 
者 可 以 尝试 一 下 效果 。 


表 8.1 修饰 表格 的 一 些 属性 


所 有 4 条 边 的 属性 设置 到 一 个 声明 中 
设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 样式 


neess 网 页 设计 主人 


续 表 

属 性 作 用 
border-color 设置 边框 中 可 见 部 分 的 颜色 ， 或 为 4 条 边 分 别 设置 颜色 
border-width 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边框 设置 宽度 
border-bottom 针对 于 下 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-bottom-color 设置 元 素 的 下 边框 颜色 
border-bottom-style 设置 元 素 的 下 边框 样式 
border-bottom-width 设置 元 素 的 下 边框 宽度 
border-left 针对 于 左边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-left-color 设置 元 素 的 左边 框 颜色 
border-left-style 设置 元 素 的 左边 框 样式 
border-left-width 设置 元 素 的 左边 框 宽度 
border-right 针对 于 右边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-right-color 设置 元 素 的 右边 框 颜色 
border-right-style 设置 元 素 的 右边 框 样式 
border-right-width 设置 元 素 的 右边 框 宽度 
border-top 针对 于 上 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-top-color 设置 元 素 的 上 边框 颜色 
border-top-style 设置 元 素 的 上 边框 样式 
border-top-width 设置 元 素 的 上 边框 宽度 
border-collapse 设置 是 否 把 表格 边框 合并 为 单一 的 边框 
border-spacing 设置 分 隔 单元 格 边框 的 距离 〈 仅 用 于 separated borders 模型 
caption-side 设置 表格 标题 的 位 置 
empty-cells 设置 是 否 显示 表格 中 的 空 单元 格 〈 仅 用 于 separated borders 模型 ) 
table-layout 设置 显示 单元 、 行 和 列 的 算法 


8.5 ”案例 : 制作 球赛 积分 表 


名 中 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 8 章 \ 案 例 : 制作 球赛 积分 表 .wmv 


足 
间 表 、 
把 它 放 


【实例 8-7】 本 实例 运用 表格 和 CSS 制作 


球 是 一 项 非常 有 魅力 的 比赛 ， 每 当 大 赛 来 临 ， 都 能 吸引 一 大 批 狂热 的 球迷 ， 每 次 看 到 大 赛 的 时 
积分 表 都 显得 特别 有 活力 。 实 例 8-7 中 将 介绍 如 何 用 表格 制作 出 一 个 鲜亮 的 球赛 积分 表 ， 可 以 
在 个 人 博客 上 或 是 个 人 网 站 内 ， 借 助 它 和 其 他 球 友 们 一 起 享受 球迷 的 生活 。 


<head> 

<title> 制 作 球赛 积分 表 </title> 

<style type="text/css"> 

#messi{ /以 messi 命名 的 样式 表 定 义 了 “西甲 ”部 分 的 表格 样式 


蜀 员 史册 入 入 加 让 矶 韦 坝 评 矶 坊 全 计 册 和 扫 员 光宇 册 


} 


width:700px; 
border-collapse:collapse; 
font-family: 微 软 雅 黑 ; 
text-align:center; 
margin:0px auto; 


#messi caption { 


border-weight:bold; 
padding:6px Opx; 
color:#3D580B; 
font-size:25px; 


#messi th,td { 


border:1px solid #aaa; 


} 
#messi thead th { 


border-bottom:2px solid #3D580B; 
background-color:#8FC629; 
color:#fff; 
padding:5px Opx; 

} 


#messi th.title { 


background-color#E3E685; 
} 


#messi th { 


background-color:#F2F4B9; 
} 


#messi tfoot td { 


border-width:0px; 
text-align:right; 
font-size:12px; 
color:#777; 

} 


#kaka th.title { 


background-color:#ffd56c; 
} 


#kaka th { 


background-color:#ffe8ae; 


} 
#cr th.title { 


background-color:#FFCC33; 


#cr th{ 


background-color-#fff255; 
上 


</style> 


</head> 


<body> 
<table id="messi"> 
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/表格 标题 样式 


/表格 行 和 列 的 样式 


/表格 表 头 样式 


/以 kaka 命名 的 样式 表 定 义 了 “意甲 ”部 分 的 表格 样式 


/以 cr 命名 的 样式 表 定义 了 “英超 ”部 分 的 表格 样式 
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57 ”<caption> 欧 洲 豪门 最 新 积分 榜 ( 截 止 到 2013-03-14)</caption> <!-- 表 格 标题 --> 


58 <thead> 

59 <tr> 

60 <th> 球 队 </th> 

61 <th> 胜 &nbsp;&nbsp;&nbsp;</th> 
62 <th> 平 &nbsp;&nbsp;&nbsp;</th> 
63 <th> 负 &nbsp;&nbsp;&nbsp;</th> 
64 <th> 积 分 </th> 

65 <th> 排 名 </th> 

66 <htr> 

67 </thead> 

68 <tfoot> 

69 <tr> 

70 <td colspan="6">zhaohui </td> <!-- 合 并 单元 格 --> 
局 </tr> 

72 </foot> 

73 <tbody> 

74 <tr> 

75 <th colspan="6" class="title"> 西 班 牙 甲 级 联赛 </th> 
76 </tr> 

77 <tr> 

78 <th> 皇 家 马德里 </th> 

79 <td>0</td> 

80 <td>0</td> 

81 <td>1</td> 

82 <td>0</td> 

83 <td>15</td> 

84 </tr> 

85 <tr> 

86 <th> 巴 塞 罗 那 </th> 

87 <td>0</td> 

88 <td>1</td> 

89 <td>1</td> 

90 <td>1</td> 

91 <td>14</td> 

92 </tr> 

93 <tr> 

94 <th> 瓦 伦 西亚 </th> 

95 <td>1</td> 

96 <td>0</td> 

97 <td>0</td> 

98 <td>3</td> 

99 <td>3</td> 

100 </tr> 

101 </tbody> 

102 

166 </tbody> 

167 </table> 

168 </body> 

169 </html> 


说 明 : 由 于 第 102 ~165 行 代码 部 分 与 前 面部 分 类 似 ， 故 省 略 以 节约 页 面 ， 可 参考 本 书 光 盘 中 源码 。 
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【运行 程序 】 其 中 ， 第 1 一 54 行 代码 是 设 定好 的 CSS 样式 表 的 头 部 ，id 命名 为 messi、kaka 和 cr 
的 样式 表 分 别 代表 了 “西甲 ”、“ 意 甲 ” 和 “英超 ”这 3 部 分 表格 。 在 三 者 各 自 的 扩展 下 ， 又 定义 了 
一 系列 针对 表 头 、 单 元 格 的 样式 表 。 第 55 一 168 行 代码 是 将 样式 表 应 用 于 表格 中 的 不 同 内容 中 ， 效 果 
如 图 8.12 所 示 。 


( 辐 ) 国 可 PRemncswp-e Eee Fe 
文件 (F) 漏 吉 (EF)】 查看 (V) 收藏 天 A) 工具 ID) 大吉 (H) 


图 8.12 ”制作 球赛 积分 表 


【深入 学 习 】 这 个 例子 中 ， 要 注意 样式 表 是 绑 定 在 哪些 对 象 上 的 ， 如 代码 的 第 21 一 26 行 ， 作 用 于 
图 中 “ 球 队 、 胜 、 平 …” 这 一 行 。 第 18 一 20 中 行 的 代码 “#pmessi th,td”， 定 义 了 表格 中 所 有 边框 的 样 
式 。 注 意 在 这 个 声明 中 是 一 个 英文 逗号 ， 而 非 点 号 。 第 75 行 代码 使 用 colspan 属性 设置 了 “西班牙 甲 
级 联赛 ”文本 的 样式 ， 类 似 这 样 的 用 法 还 有 第 104 行 和 第 132 行 。 


说 明 : 这 个 例子 中 出 现 了 margin 和 padding 属 性 ， 它 们 属于 “ 框 ”布局 的 属性 ， 本 书 放 在 了 后 面 的 章节 
中 介绍 ， 请 参照 第 10 章 。 


8.6 小 结 


本 章 介绍 了 表格 的 用 法 ， 可 以 发 现 ， 设 置 表格 的 方法 不 难 。 但 是 表格 缺少 一 些 固定 的 规律 ， 编 辑 
的 方式 多 而 灵活 。 由 于 不 同 浏览 器 支持 的 效果 大 不 相同 ， 所 以 ， 表 格 是 比较 难 控制 的 。 幸 好 现在 设计 
者 不 用 再 考虑 用 表格 来 布局 页 面 了 ， 虽 然 偶然 也 会 使 用 ， 但 是 更 多 的 时 候 ， 只 是 用 来 制作 表格 。 尽 管 
如 此 ， 表 格 仍 是 页 面 中 最 常见 的 内 容 之 一 。 本 章 主要 内 容 有 : 

构建 表格 的 方式 。 

控制 表格 的 行 高 、 宽 度 ， 以 及 单元 格 。 

使 用 <caption> 设 置 表格 的 标题 。 

为 了 更 方便 应 用 CSS， 将 表格 拆 分 为 表 头 、 表 尾 和 表 体 。 

合并 单元 格 ， 改 变 单元 格 边框 样式 。 

控制 表格 的 列 。 


网 页 设计 详解 


编辑 修饰 单元 格 中 的 内 容 。 
通过 实例 学 习 如 何 综合 运用 CSS 样式 表 来 表现 一 个 表格 。 


8.7 本 章 习 题 


习题 8-1 在 页 面 中 制作 一 个 2 行 2 列 的 表格 ， 效 果 如 图 8.13 所 示 。 


QQ Err -cla 


| 文件 站 ”第 名 |E) 二 看 (V】 收 宙 夫 (A 工具 [ ” 


图 8.13 ”创建 表格 


【分 析 】 本 题 主要 考查 的 是 读者 对 插入 表格 的 掌握 程度 。 
【关键 代码 】 


<table width="200" border="2"> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp:</td> 
</tr> 
</table> 


习题 8-2 下 面 给 出 一 段 代码 ， 请 指出 这 段 代 码 的 含义 。 


<table> 
<caption> 课 程 表 </caption> 


</table> 


【分 析 】 这 段 代 码 指 的 是 定义 一 个 表格 ， 其 中 <caption> 标 签 定义 的 是 表格 的 标题 。 
习题 8-3 ”在 页 面 中 制作 一 个 课程 表 ， 效 果 如 图 8.14 所 示 。 


上 午 英语 语文 Es 语文 数学 
| “语义 并 学 语义 英语 英语 


图 8.14 制作 课程 表 


【分 析 】 本 题 要 求 读者 制作 一 个 简单 的 表单 ， 并 将 表格 标题 也 添加 到 表格 中 ， 定 义 表格 的 宽度 ， 
使 表格 看 起 来 更 加 整洁 。 
【关键 代码 】 
<table width="600" border="1"> 
<caption> 课 程 表 </caption> 
<tr> 
<td>…</td> 
</tr> 
</table> 
习题 8-4 制作 一 个 2 行 3 列 的 表格 ， 并 设置 第 一 行 的 宽度 为 100px， 效 果 如 图 8.15 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 表格 单元 格 高 度 设置 的 掌握 程度 。 
【关键 代码 】 
<tr height="100px"> 
习题 8-5 制作 一 个 3 行 3 列 的 表格 ， 并 合并 第 一 行 和 第 二 行 的 前 两 列 单元 格 ， 效 果 如 图 8.16 
所 示 。 
本 [本 二 


(OE mo oc| Gussmmar -| De 
Er "TE (OE cB. x 


| 文件 苦 强 [日 ” 间 看 (V| 必 若 夫人。 工具 (T) 帮 色 (H] 
， 2 人 衣 元 - 邯 1 行 第 3 列 
1、 2 的 和 1 和 困 2 人 生 元 。 。 | 下 

一 -一 Ee EE 十 至 珊 | 


EY | R100% 


图 8.15 设置 表格 宽度 图 8.16 合并 表格 单元 格 


【分 析 】 本 题 主 要 考查 读者 对 合并 单元 格 的 掌握 程度 。 
【关键 代码 】 
<table width="430" border="1"> 
<tr> 
<td colspan="2" rowspan="2"> 合 并 第 1、2 行 的 第 1 个 和 第 2 个 单元 格 </td> 
<td> 第 1 行 第 3 列 </td> 


$$ 


<td> 第 2 行 第 3 列 </td>> 


$$ 


<td > 第 3 行 第 1 列 </td> 
<td > 第 3 行 第 2 列 </td> 
<td> 第 3 行 第 3 列 </td> 


$ 


</table> 


第 9 章 创建 框架 结构 的 页 面 


框架 指 的 是 页 面 的 一 种 布局 , 这 种 布局 和 之 前 说 的 “表格 布局 ”“, 还 有 之 后 章节 将 学 习 的 CSS+DIV 
布局 都 是 不 同 的 。 那 么 具体 框架 布局 是 怎样 的 呢 ? 事实 上 ， 框 架 布局 也 许 缺少 了 一 些 灵活 性 ， 但 是 它 
的 特点 是 可 以 将 浏览 器 分 割 成 几 部 分 。 这 是 其 他 标签 无 法 做 到 的 ， 本 章 将 介绍 这 种 技能 。 本 章 的 主要 


知识 点 如 下 。 
学 习 如 何 创 建 框架 集 。 
掌握 基本 的 页 面 布局 。 
通过 一 些 属性 修饰 框架 。 
学 习 如 何在 框架 中 实现 页 面 链接 以 及 锚 点 链接 。 
创建 浮动 框架 。 


9.1 创建 窗口 框架 页 面 


有 的 网 页 ， 导 航 栏 放 在 左 侧 ， 右 侧 是 页 面 主体 。 当 浏览 者 单 击 左 侧 导航 栏 时 ， 右 侧 的 页 面 会 刷新 ， 


但 是 ， 左 侧 导 航 栏 部 分 依然 保持 不 变 。 如 图 9.1 所 示 即 为 一 个 常见 的 论坛 导航 页 面 。 
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9.1 使 用 框架 的 页 面 
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类 似 这 样 形式 的 论坛 是 很 多 见 的 ， 左 侧 是 导航 栏 ， 右 侧 是 论坛 主体 。 单 击 左 侧 导 航 栏 ， 则 在 网 页 
的 右 侧 显示 链接 页 面 ， 这 个 布局 是 将 浏览 器 分 为 左右 两 部 分 。 使 用 者 可 以 在 导航 栏 中 查找 目录 ， 在 右 
侧 的 主页 中 刷新 不 同 的 页 面 。 


9.1.1 创建 窗口 框架 的 <frameset> 和 <frame> 标 签 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 9 章 \ 创 建 窗口 框架 的 <frameset> 和 <frame> 标 签 .wmv 

使 用 <frame> 标 签 在 HTML 页 面 中 设置 框架 。 那 么 ， 当 一 个 浏览 器 被 分 成 很 多 个 框架 时 ， 这 些 框 
架 放 在 一 起 ， 即 称 为 框架 集 。 框 架 集 的 HTML 标签 为 <frameset>， 也 称 为 框架 结构 标签 。 如 果 要 在 框 
架 中 放 入 内 容 ， 采 用 的 方式 是 通过 引用 所 放 内 容 的 路 径 来 加 载 对 象 ， 其 代码 如 下 : 

<frameset .….> /表明 这 是 一 个 框架 集 


<frame src=...> // 这 是 其 中 一 个 框架 中 的 页 面 路 径 
<frame src=...> 


</frameset> 


注意 : 不 能 将 <frameset> 标 签 和 <body> 标 签 一 起 使 用 。 原理 上 , 因为 框架 集 分 割 的 是 浏览 器 , 也 就 是 说 ， 
框架 集 至 少 也 需要 有 两 个 框架 组 成 。 所 以 ， 不 存在 只 有 一 个 框架 的 页 面 。 而 且 ， 框 架 集 的 作用 
是 将 多 个 页 面 同时 展示 在 浏览 器 中 。 同样 , 也 不 存在 包含 框架 的 独立 页 面 。 因 为 这 样 , <frameset> 
标签 和 <frame> 标 签 是 不 能 放 在 <body> 标 签 内 的 ， 这 样 做 没有 意义 。 


9.1.2 ”横向 分 割 窗口 


鳃 ml 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 9 章 \ 横 向 分 割 窗口 ,wmv 
窗口 的 分 割 只 有 横 纵 两 个 方向 ， 没 有 和 斜 方向 的 分 割 方法 。 横 向 分 割 窗口 ， 使 用 rows 属性 ， 代 码 
如 下 : 


<frameset rows=" 框 架 高 度 ,框架 高 度 …”> 


框架 高 度 : 可 以 使 用 百分比 或 者 像素 来 表示 。 

*: 表示 最 后 一 个 框架 的 高 度 ， 即 剩 下 来 的 最 后 一 个 ， 也 就 无 需 再 用 数值 表示 。 

这 里 通过 一 个 例子 来 说 明 如 何 实现 使 用 框架 横向 分 割 窗口 。 如 实例 9-1 中 横向 分 割 窗口 的 页 面 
代码 。 

【实例 9-1】 本 实例 介绍 横向 分 割 窗口 的 方法 ， 将 浏览 器 窗口 分 成 了 大 小 不 同 的 3 部 分 。 


区 实例 9-1: 介绍 横向 分 割 窗口 的 方法 
源码 路 径 : 光盘 \ 源 文件 \09\9-1.html 


1 

这 <head> 

3 <title> 横 向 分 割 窗口 </title> 

4 </head> 

5 < 一 以 下 部 分 是 框架 集 --> 

6 <frameset rows="40%,40%,*" > // 划 分 成 3 个 不 同 大 小 的 框架 
若 <frame ></frame > 


ss na ate 


8 <frame ></frame > 
9 <frame ></frame > 
10 </frameset> 

11 </html>>. 


【运行 程序 】 最 终 的 页 面 效 果 如 图 9.2 所 示 。 
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图 9.2 横向 分 割 窗口 


注意 : 代码 “<frameset rows="40%,40%,*" >” 最 后 位 的 星 号 符 ， 浏 览 器 会 默认 为 剩 下 的 框架 区 域 ， 在 
此 例 中 ， 即 为 20%。 


可 以 看 出 ， 最 下 面 的 一 栏 被 默认 的 定义 为 20%6， 事 实 上 ， 这 也 是 设计 者 希望 看 到 的 结果 。 
9.1.3 ”纵向 分 割 窗口 


爷 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 9 章 \ 纵 向 分 割 窗口 .wmv 
除去 横向 分 割 窗 口 ， 另 一 种 形式 则 是 纵向 分 割 窗口 。 当 纵向 分 割 窗口 时 ， 使 用 的 是 cols 属性 。 同 
样 ， 用 百分比 或 者 像素 都 可 以 表示 框架 横向 的 宽度 。 如 实例 9-2 所 示 的 为 纵向 分 割 窗口 。 
【实例 9-2】 本 实例 介绍 纵向 分 割 窗口 的 方法 ， 将 浏览 器 窗口 分 成 大 小 不 同 的 3 部 分 。 
区 | 实例 9-2: 纵向 分 割 窗口 的 方法 
源码 路 径 :光盘 \ 源 文件 \09\9-2 html 


<head> 
<title> 纵 向 分 割 窗口 </title> 
</head> 
<-- 以 下 部 分 是 框架 集 --> 
<frameset cols="20%,40%,*" > // 划 分 不 同 大 小 的 框架 
<frame ></frame > 
<frame ></frame > 
<frame ></frame > 
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图 9.3 纵向 分 割 窗口 
注意 : 在 HTML 中 ，<frame> 标 签 不 需要 关闭 ， 但 是 在 XHTML 中 ，<frame> 标 签 必须 被 正确 地 关闭 。 


9.1.4 ”框架 的 做 套 


名 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 框 架 的 说 套 .wmv 

框架 杠 套 就 是 说 如 果 同 时 混合 使 用 横 纵 结构 ， 即 在 分 割 的 框架 中 再 嵌 套 一 个 框架 集 ， 那 么 ， 写 法 
上 只 要 在 <framesetf> 标 签 中 再 放 入 <frameset> 标 签 就 可 以 了 。 如 实例 9-3 中 即 为 一 个 简单 的 框架 榜 套 的 
页 面 代码 。 

【实例 9-3】 本 实例 介绍 框架 嵌 套 的 方法 ， 在 一 个 纵向 分 割 的 窗口 中 嵌 套 了 一 个 横向 分 割 的 窗口 。 


区 实例 9-3: 框架 械 套 的 方法 
源码 路 径 : 光盘 \ 源 文件 09\9-3.html 


1 <html > 
4 <head> 
3 <title> 框 架 的 嵌 套 </title> 
4 </head> 
5 <!- 以 下 部 分 是 框架 集 --> 
6 <frameset cols="25%,*%"> 
Lg <frame> 
8 <frameset rows="40%,*%"> <!-- 幅 套 的 框架 集 --> 
9 <frame> 
10 <frame> 
11 </frameset> 
位 </frameset> 
13 </html>> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 9.4 所 示 。 

【深入 学 习 】 代 码 第 8 一 11 行 ， 是 一 个 新 的 框架 集 。 同 时 ， 这 个 框架 集 可 以 看 成 是 大 框架 下 的 一 
个 子 框架 。 这 是 一 个 先 纵向 分 割 ， 接 着 在 子 框架 中 横向 分 割 的 实例 。 如 果 代 码 第 6 行 和 第 8 行 交换 一 
下 ， 则 效果 显示 如 图 9.5 所 示 。 


这 是 两 种 最 常见 的 框架 布局 结构 ， 第 一 种 是 左右 布局 的 页 面 ， 第 二 种 则 是 上 下 布局 的 页 面 。 异 曲 
同 工 ， 从 这 个 改变 中 可 以 看 到 设计 页 面 的 魅力 。 
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9.1.5 ”将 页 面 放 入 窗口 框架 中 


健 4 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 9 章 \ 将 页 面 放 入 窗口 框架 中 .wmv 

将 页 面 放置 入 窗口 框架 中 ， 需 要 在 每 一 个 框架 中 通过 路 径 的 方式 来 添加 页 面 。 如 图 9.5 所 示 ， 若 
一 个 框架 集中 包含 3 个 框架 ， 那 意味 着 要 准备 3 个 页 面 分 别 放 入 相应 的 框架 中 。 这 里 通过 一 个 实例 
来 说 明 如 何 将 页 面 加 入 框架 集 。 准备 3 个 页 面 redhtml、white html 和 blue html。 具 体 的 方法 如 实例 9-4 
所 示 。 
说 明 : 每 一 个 框架 对 应 着 一 个 页 面 。 所 以 ， 如 果 窗 口中 划分 太 多 框架 ， 也 是 一 种 不 妥当 的 设计 方式 。 

【实例 9-4】 本 实例 将 3 个 页 面 放 入 嵌 套 的 窗口 框架 中 。 


罗 ”实例 9-4: 将 3 个 页 面 放 入 坡 套 的 窗 D 杠 架 F 
源码 路 径 : 光盘 \ 源 文件 ,09\9-4.html 


1 <html> 

2 <head> 

3 <title> 将 页 面 放 入 窗口 框架 中 </title> 

4 </head> 

5 <frameset rows="40%,*%"> <!- 这 是 框架 集 --> 

6 <frame src="red.html"> <!- 通 过 路 径 ， 引 入 red 页 面 --> 
区 <frameset cols="38.2%,*%"> <!- 这 是 子 框架 集 --> 

8 <frame src=" white.html"> <!- 通 过 路 径 ， 引 入 white 页 面 --> 
9 <frame src="blue.html"> <!- 通 过 路 径 ， 引 入 blue 页 面 -> 
10 </frameset> 

ul </frameset> 

12 </html>> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 9.6 所 示 。 

【深入 学 习 】 页 面 中 通过 sre 属性 告诉 框架 与 其 相对 应 的 页 面 ， 并 且 将 页 面 添加 在 其 中 。 这 是 一 个 
上 下 分 割 的 页 面 ， 上 部 分 框架 中 是 背景 为 红色 的 页 面 。 而 下 部 分 框架 集中 ， 分 割 成 左右 框架 。 左 边 是 
背景 为 白色 的 页 面 ， 右 边 则 是 背景 为 蓝 色 的 页 面 。 


后 
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图 9.6 将 页 面 放 入 窗口 框架 中 


9.2 ”修饰 框架 的 细节 


设计 页 面 没有 太 多 复杂 的 技术 ， 但 是 要 设计 出 优秀 的 页 面 ， 关 键 在 于 对 细节 的 把 握 ， 也 就 是 所 谓 
的 “细节 出 大 师 ”。 在 设计 这 一 领域 中 ， 一 条 重要 的 准则 是 : 页 面 是 给 浏览 互联 网 的 用 户 提供 的 ， 必 
须要 考虑 页 面 给 使 用 者 的 友好 度 。 一 个 具有 亲和力 的 页 面 会 让 浏览 者 对 这 个 页 面 留 下 深刻 的 印象 。 


9.2.1 给 无 法 处 理 框架 的 浏览 器 注释 说 明 


健 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 给 无 法 处 理 框架 的 浏览 器 注释 说 明 .wmv 

在 框架 设计 的 页 面 时 ， 有 时 会 过 到 不 能 显示 框架 的 浏览 器 。 在 这 种 情况 下 ， 可 以 使 用 <noframe> 标 
签 加 以 注释 。 如 实例 9-5 所 示 即 为 使 用 这 样 注释 的 方法 。 

【实例 9-5】 本 实例 使 用 <noframe> 标 签 进行 注释 说 明 。 


区 : | 实例 9.5; 使 用 <noftame> 标 签 进行 注释 说 明 


源码 路 径 : 光盘 \ 源 文件 \09\9-5.html 


1 <html> 

和 2 <frameset cols="20%,30%,*"> < 上 -划分 不 同 大 小 的 框架 -> 

3 <frame > 

4 <frame > 

5 <frame > 

6 <noframes> < 上 -用 来 声明 当 浏览 器 不 能 处 理 框架 时 的 情况 --> 
攻 <body> 很 抱 允 ， 您 的 浏览 器 无 法 处 理 框架 ! 

8 </body> 

9 </noframes> 


【深入 学 习 】 当 使 用 了 第 6 一 9 行 这 样 的 声明 ， 表 示 如 果 浏 览 器 无 法 处 理 框架 ， 则 <noframes> 标 答 
开始 起 作用 。 那 么 此 时 浏览 器 将 显示 <body> 标 签 的 内 容 。 告 诉 使 用 者 “很 抱歉， 您 的 浏览 器 无 法 处 理 
框架 ! ”。 


说 明 : 在 目前 的 浏览 器 中 ， 大 部 分 都 能 正确 处 理 框架 。 


9.2.2 固定 框架 的 位 置 


区 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 固 定 框架 的 位 置 .wmv 

在 <frameset> 标 签 的 框架 集中 ， 虽 然 框架 的 位 置 是 按照 事先 设 定 好 的 效果 出 现在 浏览 器 中 , 但 是 框 
架 的 边框 并 不 是 固定 的 ， 如 果 浏 览 者 拖 搜 框架 集 的 边框 ， 框 架 的 大 小 是 可 以 随意 改变 的 。 若 设计 者 希 
望 固定 框架 的 尺寸 ， 可 以 使 用 <noresize> 标 签 来 定位 边框 的 位 置 。 如 实例 9-6 中 的 页 面 ， 它 的 框架 就 是 
固定 的 。 


【实例 9-6】 本 实例 使 用 <noresize> 标 签 固定 框架 的 位 置 。 


re 实例 9-6: 使 用 <noresize> 标 签 固定 框架 的 位 置 

| 源码 路 径 : 光盘 \ 源 文件 099-6html 
1 <html> 

人 2 <frameset rows="20%,30%,*"> <!-- 划 分 框架 -> 

3 <frame noresize="noresize" > <!- 固 定 框架 的 位 置 --> 
4 <frame noresize="noresize" > 

5 <frameset cols="35%,25%,*"> 

6 <frame noresize="noresize" src="red.html"> 

区 <frame noresize="noresize" src="blue.html"> 

8 </frameset> 

9 </frameset> 

10 </html> 


这 样 设 定之 后 ， 边 框 的 位 置 就 被 固定 住 ， 因 此 框架 的 尺寸 不 会 被 随意 改变 。 
技巧 : 固定 框架 的 位 置 ， 这 样 的 设 定 ， 可 以 使 页 面 显得 更 工整 。 


9.2.3 框架 中 设置 滚动 条 
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窗口 框架 中 有 个 细节 ， 当 页 面 中 的 内 容 超出 框架 的 范围 时 ， 此 时 框架 的 底 边 会 出 现 滚动 条 。 这 个 
滚动 条 也 是 可 以 设置 的 ， 通 过 scrolling 属性 可 以 实现 这 种 控制 。 实 现 的 方法 如 实例 9-7 所 示 。 

【实例 9-7】 本 实例 介绍 设置 滚动 条 的 方法 。 在 浏览 器 中 有 3 个 框架 窗口 ， 每 个 框架 窗口 的 滚动 条 
样式 都 不 同 。 


区 实例 97: 介绍 设置 滚动 条 的 方法 
源码 路 径 : 光盘 \ 源 文件 \09\9-7.html 


可 <html > 

之 <head> 

3 <title> 设 置 滚动 条 </title> 

= </head> 

5 <!- 以 下 部 分 是 框架 集 --> 

6 <frameset rows="809%,*9% "> 

区 <frame src= "制定 积分 表 .html" scrolling=auto> /设置 滚动 条 是 自动 
8 <frameset cols="38.2%,*%"> 


152 
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9 <frame src="white .html" scrolling=no > /设置 滚动 条 是 不 显示 的 
10 <frame src="blue.html" scrolling=yes > // 设 置 滚动 条 是 显示 的 
MM </frameset> 

WP </frameset> 

13 </html>> 


【运行 程序 】 浏 览 该 页 面 ,效果 如 图 9.7 所 示 。 标 注 线 框 中 的 便 是 滚动 条 。 这 是 已 经 设置 好 的 滚动 


条 样式 。 
Eemucsp- c| Gums “le mx 


ETE 
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图 9.7 框架 中 的 滚动 条 
【深入 学 习 】 在 代码 第 7、9 和 10 行 ，scrolling 属性 的 属性 值 分 别 定 义 为 auto、no 和 yes， 它 们 分 
别 起 到 不 同 的 作用 。 

auto: 根据 页 面 的 内 容 是 否 超出 框架 范围 ， 而 决定 是 否 出 现 滚动 条 。 如 图 9.7 中 顶部 框架 中 页 面 超 
出 了 框架 范围 ， 右 侧 和 边框 底部 都 出 现 了 滚动 条 。 

no: 表示 不 出 现 滚动 条 。 

yes: 表示 无 论 页 面 内容 是 否 超出 框架 范围 ， 都 将 显示 滚动 条 。 如 图 9.7 中 页 面 的 下 方 右 侧 ， 表 现 
为 灰色 的 滚动 条 。 


9.3 修改 框架 边框 的 样式 
框架 的 边框 样式 也 是 可 以 修改 的 ， 通 过 一 些 简 单 的 属性 修饰 ， 可 以 改变 框架 边框 的 表现 形式 。 如 
边框 的 粗细 、 颜 色 ， 或 者 是 边框 的 边 距 。 使 用 这 些 特点 ， 可 以 作出 一 些 有 意思 的 页 面 效果 。 
9.3.1 判定 边框 是 否 显示 


鳃 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 9 章 \ 判 定 边框 是 否 显示 .wmv 
在 有 些 情况 下 ， 灰 色 的 边框 会 很 麻烦 ， 看 上 去 像 把 页 面前 解 得 支离破碎 。 使 用 frameborder 属性 可 
以 决定 是 否 显示 边框 。 其 写法 是 : 


<frame frameborder="0" src="> 


全 
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0 表示 不 显示 边框 ， 如 果 写 成 1， 则 是 显示 边框 。 实 例 9-8 中 所 定义 的 为 不 显示 边框 的 页 面 。 
【实例 9-8】 本 实例 介绍 判定 边框 是 否 显示 的 方法 。 
办 ”实例 9-8: 判定 边框 是 否 显示 的 方法 
源码 路 径 : 光盘 \ 源 文件 \09\9-8.html 


<head> 
<title> 判 定 边框 是 否 显示 </title> 
</head> 
<frameset cols="50%,*" border="2px"> < 上 -划分 框架 大 小 --> 
<frame frameborder="0" src="blue.html"> <!- 不 显示 框架 边框 -> 
<frame frameborder="0" src="white.html" > 
</frameset> 
</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 9.8 所 示 。 
f [一 > 一 | 
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图 9.8 有 无 边框 的 对 比 


注意 : 不 需要 边框 并 不 代表 边框 的 宽度 为 0， 实 例 中 边框 的 宽度 是 2px， 最 好 的 方法 是 同时 设 定 边框 的 
宽度 为 0。 


9.3.2 ”改变 边框 的 表现 效果 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 改 变 边 框 的 表现 效果 .wmv 

border 表示 框架 的 边框 。 在 这 个 属性 上 可 以 扩展 出 一 些 新 的 特性 ， 如 bordercolor， 表 示 修 改 边 框 的 
颜色 。 通 过 修改 border 扩展 的 一 些 属性 可 以 改变 边框 的 表现 效果 。 实 例 9-9 中 为 修改 过 的 边框 样式 。 

【实例 9-9】 本 实例 改变 了 边框 的 颜色 。 


re 实例 9-9: 改变 边框 的 颜色 
源码 路 径 : 光盘 \ 源 文件 \09\9-9.html 


<head> 
<title> 改 变 边 框 的 表现 效果 </title> 
</head> 
<frameset rows="30%,70%" border=23px bordercolor="#FF0000"> 
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6 < 上 -定义 边框 宽度 为 23px， 边 框 颜色 是 红色 一 > 
7 <frame > 

8 <frameset cols="40%,*" bordercolor="#0FF"> 
入 <frame> 

10 <frame > 

| </frameset> 

12 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 9.9 所 示 。 


( E BE 
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图 9.9 改变 边框 的 颜色 


【深入 学 习 】 代 码 中 第 5 行 和 第 8 行 ， 定 义 了 页 面 中 框架 边框 的 宽度 为 23px， 分 别 是 红色 和 蓝 色 
的 边框 。 


注意 : 如 果 在 先前 一 级 ， 如 第 5 行 中 定义 了 边框 的 宽度 ， 那 么 作为 嵌入 其 中 的 边框 ， 其 边框 长 度 会 跟随 
上 一 级 。 即 第 8 行 虽然 没有 定义 边框 的 宽度 ， 但 是 浏览 器 会 默认 这 个 边框 是 23pX。 


9.3.3 边框 的 边 距 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 边 框 的 边 距 .wmv 
边 距 是 指 框架 内 页 面 内 容 和 边框 的 距离 。 使 用 marginwidth 属性 设置 左右 两 边 的 边 距 ， 使 用 
marginheight 属性 设置 上 下 两 边 的 边 距 。 使 用 的 方法 如 实例 9-10 页 面 展示 的 不 同 效果 。 
【实例 9-10】 本 实例 为 4 个 框架 窗口 设置 不 同 的 边框 边 距 。 
re | 实例 9-10: 为 4 个 框架 窗口 设置 不 同 的 边框 边 距 
源码 路 径 : 光盘 \ 源 文件 ,09\9-10.html 


1 

2 <head> 

3 <title> 设 置 边 框 的 边 距 </title> 
和 </head> 

5 <frameset rows="30%,30%,*" > 
6 <frame src="red.html" marginwidth=50px > 

区 <!-- 设 置 页 面 内 容 距离 边框 的 左右 距离 是 50px--> 

8 <frame src="blue.html" marginwidth=100px > 

9 < 上 -设置 页 面 内 容 距 离 边 框 的 左右 距离 是 100px--> 

0 <frameset cols="409%,” > 

| <frame src="red.html" marginheight=50px> 
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12 < 上 -设置 页 面 内容 距 离 边 框 的 上 下 距离 是 50px 一 > 

13 <frame src=" white1.html" marginwidth=100px marginheight=50px> 
14 <!- 设 置 页 面 内 容 距离 边框 的 上 下 距离 是 50px， 左 右 距离 是 100px--> 
15 </frameset> 

16 </html> 


【运行 程序 】 最 终 在 浏览 器 中 的 显示 效果 如 图 9.10 所 示 。 
i = 


EF- 局 | 


图 9.10 设置 边框 的 边 距 


说 明 : marginwidth 和 marginheight 是 两 个 很 有 实用 意义 的 标签 属性 ， 在 之 后 的 CSS+DIV 布 局 中 还 会 再 
次 遇 到 。 


【深入 学 习 】 在 这 个 例子 中 ， 可 以 看 到 页 面 中 的 文本 。 如 red、blue 和 white 在 不 同 的 框架 中 ， 根 
据 不 同 框架 下 的 marginwidth 和 marginheight 属性 设置 ， 出 现在 不 同 的 位 置 。 这 是 一 种 很 好 的 布局 定位 
的 方式 。 


9.4 ”框架 集中 页 面 之 间 的 链接 


本 章 的 一 开始 ， 提 到 了 如 论坛 形式 的 页 面 ， 以 左边 为 导航 栏 ， 右 边 为 页 面 的 主体 部 分 这 样 框 架 集 
下 的 布局 页 面 。 在 本 节 中 ， 将 介绍 如 何 使 用 超 链接 配合 框架 的 特性 ， 制 作出 具有 特色 的 页 面 。 


9.4.1 在 指定 的 框架 中 打开 链接 


全 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 9 章 \ 在 指定 的 框架 中 打开 链接 .wmv 

在 如 图 9.11 所 示 的 一 个 原始 的 页 面 中 ， 可 以 看 出 一 个 简单 的 页 面 导 航 是 如 何在 同一 个 窗口 中 实现 
链接 的 。 

页 面 左 侧 是 一 个 表格 ， 依 次 写 着 “第 一 栏 显示 蓝 色 页 面 ”、“ 第 二 栏 显示 红色 页 面 ”、“ 第 三 栏 
显示 绿色 页 面 ” 和 “第 四 栏 显示 橙色 页 面 ”。 那 么 ， 如 何 才能 让 左 侧 导 航 栏 实现 这 样 的 功能 ? 先 在 这 
个 浏览 器 中 放 入 了 5 个 页 面 ， 当 使 用 者 单 击 页 面 左 侧 的 导航 栏 ， 其 中 的 条 目 会 链接 到 右 侧 不 同 的 位 置 。 
实例 9-11 中 实现 了 这 个 框架 集 。 


他 
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【实例 9-11】 本 实例 使 用 name 属性 给 框架 进行 命名 。 


re 实例 9-11: 使 用 name 属性 给 框架 进行 命名 
源码 路 径 : 光盘 \ 源 文件 ,09\9-11.html 


MU 

各 <head> 

3 <title> 在 指定 的 框架 中 打开 页 面 </title> 

4 </head> 

5 <frameset cols="40%,*" > 

6 <frame src="white.html" marginwidth=50px marginheight=20px > 

区 <frameset rows="25%,25%,25%,*" > 

8 <frame src="silver.html" marginheight=20px marginwidth=50px 
9 


name="blue"> <!- 给 不 同 的 框架 位 置 定义 相对 应 的 name--> 
10 <frame src="silver.html" marginheight=20px marginwidth=50px 
| name="red"> 
12 <frame src="silver.html" marginheight=20px marginwidth=50px 
nb name="green"> 
14 <frame src="silver.html" marginheight=20px marginwidth=50px 
15 name="orange"> 
16 </html> 


【深入 学 习 】 这 段 代 码 中 的 重点 是 其 中 的 name 属性 。 如 代码 第 8、9 行 中 表明 ， 这 个 框架 部 分 命 
名 为 blue。 依 次 可 以 推论 出 ， 代 码 分 别 命名 了 红色 、 绿 色 和 松 色 的 框架 位 置 。 接 下 来 ， 只 要 设法 令 浏 
览 器 左 侧 导 航 栏 中 的 目录 链接 到 所 对 应 名 字 的 框架 位 置 就 可 以 了 。 如 实例 9-12 中 实现 了 如 何 令 页 面 对 
应 不 同位 置 的 框架 。 

【实例 9-12】 本 实例 使 用 target 属性 定义 链接 的 框架 。 


区 实例 9-12: 使 用 target 属性 定义 链接 的 框架 
源码 路 径 : 光盘 \ 源 文件 \09\9-12.html 


1 <html> 
区 <head> 
加 <title> 使 用 target 属性 定义 链接 的 框架 </title> 


ss 网 页 设计 评介 


4 <style> 
5 body {color:black; // 文 本 颜色 为 黑色 
6 font:2em, arial; /文本 的 字体 
区 background-color:white; // 页 面 的 背景 
8 } 
9 table td {font:1.2em, 幼 圆 ; /表格 中 的 文本 字体 
10 line-height:2.5em;} // 设 置 列表 之 间 的 距离 
ke </style> 
1 </head> 
13 <body> 
14 white 
15 <p> 
16 <table border="0"> 
17 <tr> 
18 <td><a href="blue.html" marginheight=20px marginwidth=50px 
19 target="blue"> 第 一 栏 显示 蓝 色 页 面 </a></td> 。 <!- 使 用 target 属性 定义 目标 位 置 --> 
20 </tr> 
21 <tr> 
22 <td><a href="red.html" marginheight=20px marginwidth=50px 
23 target="red"> 第 二 栏 显示 红 色 页 面 </a></td> 
24 </tr> 
25 <tr> 
26 <td><a href="green.html" marginheight=20px marginwidth=50px 
27 target="green"> 第 三 栏 显示 绿色 页 面 </a></td> 
28 </tr> 
29 <tr> 
30 <td><a href="orange.html" marginheight=20px marginwidth=50px 
31 target="orange"> 第 四 栏 显 示 榴 色 页 面 </a></td> 
2 </tr> 
EE </body> 
34 </html> 
【运行 程序 】 最 终 显示 的 效果 如 图 9.12 所 示 。 
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第 三 栏 显示 绿色 页 面 
笔 四 栏 忆 示 栈 色 页 面 


到 100% ， 


9.12 ”最 终 页 面 效果 


【深入 学 习 】 第 18 行 中 代码 ， 文 本 “第 一 栏 显 示 蓝 色 页 面 ” 超 链接 到 网 页 blue html， 而 决定 放置 
于 哪个 页 面 取决 于 第 19 行 中 “target="blue"”。 target 属性 使 超 链接 的 页 面 放置 于 命名 为 blue 的 框架 中 ， 


他 


H 


第 9 章 创建 框架 结构 的 页 


由 于 在 实例 9-11 中 已 经 命名 好 了 blue 框架 。 所 以 ， 当 单 击 “第 一 栏 显 示 蓝 色 页 面 ” 超 链接 时 ，blue 页 
面 将 出 现在 浏览 器 右 侧 的 第 一 栏 。 同 样 原理 ， 其 他 3 色 的 页 面 也 能 出 现在 设 定好 的 框架 中 。 


说 明 : 如 果 单 击 页 面 的 第 二 栏 ， 同 样 会 在 页 面 右 侧 第 二 栏 链 接 到 red.html。 


9.4.2 ”框架 内 的 锚 点 链接 


鳃 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 9 章 \ 框 架 内 的 锚 点 链接 .wmv 
使 用 name 属性 还 可 以 实现 在 框架 内 锚 点 链接 。 在 框架 集中 设置 页 面 路 径 的 同时 , 指定 锚 点 的 位 置 。 
如 图 9.13 所 示 ， 这 是 一 张 左右 分 割 布局 的 页 面 。 
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图 9.13 框架 内 的 锚 点 链接 初始 页 面 
在 这 个 页 面 中 ， 设 计 者 希望 当 单 击 左 侧 边框 中 文本 “ 带 有 锚 的 链接 ”时 ， 右 侧 边框 中 页 面 跳 转 到 
相应 的 文本 位 置 。 那 么 ， 在 左 侧 的 边框 中 的 页 面 ， 写 入 如 下 所 示 的 页 面 代码 : 
<a href ="12.html#aaa" target ="showframe"> 带 有 锚 的 链接 </a> 
说 明 : 因为 只 是 一 个 基本 的 简单 链接 页 面 ,这 里 并 没有 给 出 左 侧 边 框 中 的 页 面 源码 ， 可 参考 本 书 光盘 。 
右 侧 框架 中 的 页 面 保存 为 页 面 文件 12.html， 右 侧 框架 命名 为 showframe， 所 以 这 人 句 代 码 的 意思 表 


明 ， 链 接 到 showframe 框架 内 12.html 页 面 的 aaa 位 置 。 因 此 ， 右 侧 框架 中 的 页 面 代码 中 需要 有 这 样 注 
明 的 一 句 代 码 : 


<a name="aaa"> 十 四 </a> 
在 文本 “十 四 ”的 位 置 定义 名 为 aaa 的 锚 点 ， 那 么 ， 最 终 框架 集 的 代码 如 实例 9-13 实现 的 锚 点 


链接 。 
【实例 9-13】 本 实例 设置 框架 内 的 锚 点 链接 。 


</head> 


中 
芝 
分 <title> 框 架 内 的 错 点 链接 </title> 
4 
5 <html> 


<frameset cols="180,”> 
<frame src="content.html"> 
<frame src="12.html#aaa" name="showframe"> 


L 


图 9.14 框架 内 的 锚 点 链接 最 终 页 面 


【深入 学 习 】 重 点 是 代码 中 的 第 8 行 ， 使 用 “#” 放 在 链接 页 面 名 的 后 面 。 这 样 ， 当 浏览 器 打开 页 
面 时 ， 会 定位 到 这 一 位 置 ， 同 时 ， 当 单 击 左 侧 文 本 “ 带 有 锚 的 链接 ”时 ， 也 会 定位 到 这 一 位 置 。 


9.5 灵活 的 <iframe> 框 架 


右 4 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 9 章 \ 灵 活 的 <iframe> 框 架 .wmv 

<iframe> 标 签 的 用 法 不 同 于 <frame> 标 签 ， 在 表现 上 也 有 不 少 差别 。<iframe> 标 签 创 建 的 框架 具有 
更 好 的 灵活 性 ， 它 可 以 更 容易 地 将 框架 放 在 浏览 器 中 的 任何 位 置 ， 可 以 自由 控制 窗口 的 大 小 ， 所 以 ， 
这 种 框架 又 被 称 为 嵌入 式 框架 ， 或 者 浮动 框架 。 这 种 框架 也 是 页 面 中 常见 的 一 种 。 

<iframe> 标 签 是 可 以 放 在 <body> 标 签 中 使 用 的 。 同 样 ， 它 可 以 使 用 修饰 框架 的 属性 ， 常 见 的 样式 
属性 如 下 : 

<iframe src="URL' width="..." height="..." 

align=... marginwidth="..." marginheight="..." 


scrolling="auto" frameborder="..."> 
</iframe> 


width 和 height 表明 插入 框架 的 宽 和 高 。align 标签 表明 框架 中 的 内 容 对 齐 方式 。 其 他 的 标签 意义 
和 <frame> 标 签 关 联 的 属性 是 一 样 的 。 具 体 如 何 使 用 <iframe> 标 签 ， 实 例 9-14 中 创建 了 浮动 框架 。 

【实例 9-14】 本 实例 介绍 创建 浮动 框架 的 方法 。 当 单 击 页 面 左上 角 上 的 导航 小 标题 时 ， 浮 动 框架 
中 便 链接 到 所 对 应 的 不 同 页 面 。 


re 实例 9-14: 创建 浮动 框架 的 方法 
源码 路 径 : 光盘 \ 源 文件 \09\9-14.html 


加 <title> 创 建 浮动 框架 </title> 

</head> 

5 <body> 

6 <a href="http://www.baidu.com.cn" target="three"> 百 度 </a> 
2 <a href="http://www.google.cn" target="three"> 谷 歌 </a> 

8 <a href="http://www.soso.com" target="three"> 搜 搜 </a> 

9 <p> 

10 <iframe width="800" height="400" 

11 frameborder=0 scrolling="auto” 

2 align="center" name="three"> ”<!-- 设 置 浮动 框架 的 样式 属性 --> 
13 -</body> 

14 </html> 


【运行 程序 】 浏 览 该 页 面 ， 这 个 例子 中 使 用 target 和 name 属性 配合 ， 展 示 在 浮动 框架 中 实现 的 链 
接 ， 效 果 如 图 9.15 所 示 。 
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图 9.15 创建 浮动 框架 
注意 : 当 单 击 页 面 左上 角 的 导航 小 标题 时 ,浮动 框 架 中 便 链 接 到 所 对 应 的 不 同 页 面 。 第 10 行 代码 定义 
了 浮动 框架 的 大 小 ， 第 11 行 表示 滚动 条 自动 匹配 ， 框 架 的 边框 不 显示 。 第 12 行 表明 这 个 框架 居 

于 页 面 中 间 ， 命 名 为 three。 


9.6 案例 : 制定 自己 的 链接 主页 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 案 例 : 制定 自己 的 链接 主页 .wmv 

本 节 介绍 的 例子 ， 将 展示 浮动 框架 如 何 结合 <table> 标 签 来 布局 页 面 。 思 路 是 通过 表格 来 布局 ， 在 
表格 的 单元 格 中 放 入 浮动 框架 。 与 只 使 用 框架 集 的 布局 来 比较 ， 这 样 还 是 比较 好 的 ， 虽 然 表格 布局 已 
经 不 常用 ， 但 是 类 似 这 样 布局 的 运用 依然 是 个 不 错 的 方法 。 实 例 9-15 中 为 表格 配合 框架 的 使 用 。 

【实例 9-15】 本 例 制定 了 一 个 自己 的 链接 主页 。 单 击 左 侧 的 导航 栏 ， 就 会 在 右 侧 显示 出 相应 的 链 
接 页 面 。 
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HTML+CSS 网 页 设计 详解 
办 实例 9-15: 制定 一 个 自己 的 链接 主页 
源码 路 径 : 光盘 \ 源 文件 ,09\9-15.html 


则 <html> 

2 <head> 

3 <title> 制 定 自己 的 链接 主页 </title> 

4 <style> 

5 body {color:black:; /文本 颜色 

6 font2em, arial; /文本 的 字体 

贰 background-color:silver; // 页 面 的 背景 颜色 

8 } 

9 .biaoti {font:1.5em, 华 文 琥珀 ; /biaoti 对 象 的 字体 

10 color:blue; /lbiaoti 对 象 的 文本 颜色 

11 } 

位 table td {font:1.2em,; /表格 的 字体 

13 line-height:2.5em; /表格 文本 的 行距 

14 text-align:center; /表格 中 文本 的 对 齐 方式 

15 align:center;} /表格 的 对 齐 方式 

16 tfoot td{ 

17 border-width:0px; // 页 脚 的 样式 

18 text-align:right; 

19 font-size: 12px; 

20 color:green;} 

21 ailink {color : blue; /| 链接 状态 的 修改 

22 text-decoration : none; 

23 } 

24 a:visited {color : green; 

25 text-decoration : none; 

26 i 

27 a:hover {color : red; 

28 text-decoration : underline; 

29 } 

30 a:active {color : #999999; 

31 text-decoration : none; 

32 h 

33 </style> 

34 </head> 

35 <body> 

36 <table border="0"> <!-- 制 定 表格 --> 

37 <tfoot> 

38 <tr> 

39 <td colspan="2">zhaohui </td> 

40 </tr> 

41 </tfoot> 

42 <tr id="biaoti"> < 在 这 两 个 单元 格 中 放 入 LOGO 图 像 -> 
43 <td width="100" height="70"><img src=" 图 片 /Glass.png" border=0/></td> 
44 <td class="biaoti"> 浏 览 属于 自己 的 主页 </td> 

45 </tr> 

46 <tr> <!-- 在 这 两 个 单元 格 中 放 入 列表 和 框架 集 --> 
47 <td> 

48 <p><a href=http://www.baidu.com target=three>baidu</a> 

49 <p><a href="http://www.google.cn" target="three">google</a> 
50 <p><a href="http://www.soso.com" target="three">sousou</a> 


51 <p> 
52 </td> 

53 <td> 

54 <iframe width="800" height="430" marginwidth="0" 
55 frameborder=0 scrolling="auto” 

56 align="center" name="three" 

57 src="http://www.baidu.com" 

58 > < 上 -制定 浮动 框架 -> 
59 </iframe> 

60 </td> 

61 </tr> 

62 </table> 

63 </body> 

64 </html> 


【运行 程序 】 浏 览 该 页 面 ， 最 终 在 浏览 器 中 的 显示 效果 如 图 9.16 所 示 。 
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图 9.16 制定 自己 的 链接 主页 


【深入 学 习 】 这 个 例子 中 ， 使 用 “ 田 ” 字 形 表格 布局 整个 页 面 。 在 右 下 角 的 单元 格 中 嵌入 一 个 浮 
动 框架 ， 用 来 显示 页 面 。 这 是 使 用 表格 和 框架 的 组 合 来 布局 页 面 ， 左 侧 是 导航 栏 ， 右 侧 是 页 面 的 主要 
内 容 。 此 外 ， 还 可 以 在 左上 角 放 入 自己 的 LOGO， 右 上 角 放 入 自己 喜欢 的 页 面 标题 。 


技巧 : 通过 上 面 的 例子 ， 可 以 设 定 专属 于 自己 的 主页 。 这 个 方法 不 难 ， 使 用 这 样 的 方法 ， 读 者 可 以 自 
已 决定 加 入 更 多 的 页 面 链接 。 


9.7 小 结 
本 章 介绍 了 通过 框架 集 来 布局 页 面 的 知识 。 通 过 本 章 所 有 的 知识 点 ， 读 者 可 以 将 多 个 页 面 放 入 同 


-加 


于 ”HTML+Css 网 页 设计 详解 


一 个 浏览 器 窗口 中 ， 使 页 面 内 容 更 加 丰富 。 对 于 浏览 者 来 说 ， 增 加 了 页 面 的 便捷 性 ， 无 疑 也 提高 了 页 
面 的 友好 度 。 本 章 主要 内 容 有 : 

使 用 <frameset> 和 <frame> 标 签 创建 框架 。 

常见 的 几 种 布局 页 面 的 基本 形式 。 
修饰 框架 的 边框 和 边 距 。 
在 框架 中 实现 页 面 链接 以 及 锚 点 链接 。 

使 we 动 框架 。 

最 后 一 个 综合 案例 结合 了 较 多 知识 点 ， 包 括 使 用 样式 表 来 修饰 页 面 内容 ， 结 合 表格 和 浮动 框架 来 
布局 页 面 。 在 第 10 章 中 ， 将 介绍 Web 设计 中 又 一 个 布局 页 面 的 重要 元 素 一 一 层 。 


9.8 本 章 


习题 9-1 在 网 页 中 创建 一 个 纵向 分 割 的 框架 ， 效 果 如 图 9.17 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 框架 的 定义 的 掌握 程度 。 
【关键 代码 】 
<frameset cols="40%,*" > 
<frame src="blue.html" ></frame > 


<frame src="red.html" ></frame > 
</frameset> 


习题 9-2 下 面 给 出 一 段 代码 。 请 解释 这 段 代 码 中 加 粗 部 分 代码 的 含义 。 


<noframe> 

<body> 

请 您 浏览 其 他 网 页 ， 此 网 页 不 支持 
</body> 

</noframe> 


【分 析 】 本 题 主 要 考查 读者 对 <noframe> 标 签 的 了 解 。<noframe> 标 签 的 含义 是 当 浏 览 器 不 支持 该 
框架 时 ， 页 面 就 会 显示 <noframe> 标 签 中 定义 的 内 容 。 

习题 9-3 下面 网 页 中 己 经 创建 了 一 个 框架 , 但 子 框架 的 边框 会 移动 ,请 调整 子 框架 的 边框 ,使 其 
不 可 移动 ， 效 果 如 图 9.18 所 示 。 
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图 9.17 创建 纵向 分 割 的 框架 图 9.18 固定 框架 边框 
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第 9 章 创建 框架 结构 的 页 面 让 


【分 析 】 本 题 主要 考查 读者 对 框架 调节 属性 noresize 的 掌握 程度 。 
【关键 代码 】 


<frame src="blue.html" noresize="noresize” ></frame > 
<frame src="white1.html" noresize="noresize" ></frame > 


习题 9-4 在 网 页 中 创建 一 个 嵌 套 框架 ， 效 果 如 图 9.19 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 窗口 嵌 套 的 掌握 程度 。 需 要 注意 的 是 ， 不 要 丢掉 入 套 框架 的 结束 标 


【关键 代码 】 


<frameset rows="40%,*%"> 
<frame src="blue.html"> 
<frameset cols="25%,35%,*%"> 
<frame src="red.html"> 
<frame src="white1.html"> 
<frame src="green.html"> 
</frameset> 
</framset> 


习题 9-5 ”在 网 页 中 添加 一 个 浮动 窗口 ， 并 为 该 浮动 窗口 设置 一 个 滚动 条 ， 效 果 如 图 9.20 所 示 。 
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1 创建 嵌 套 框架 图 9.20 创建 浮动 框架 


【分 析 】 本 题 主要 考查 读者 对 浮动 窗口 的 属性 设置 掌握 程度 。 这 里 主要 使 用 scrolling 属性 为 浮动 
窗口 添加 了 滚动 条 。 其 中 ， 为 了 使 效果 更 加 明显 ， 这 里 给 浮动 窗口 链接 了 一 个 网 站 。 

【关键 代码 】 

<iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="yes"> 


此 浏览 器 不 支持 
<liframe> 


第 10 章 ” 当 C55 样式 表 遇 到 层 


从 本 章 开 始 ， 有 必要 给 HTML 的 概念 升级 。W3C 曾 规定 : “动态 HTML 是 一 个 被 某 些 厂商 用 来 
描述 可 使 文档 动态 性 更 强 的 HTML、 样式 表 以 及 脚本 的 结合 物 的 术语 。 ”动态 HTML 指 的 便 是 DHTML 
(Dynamic HTML) 。 对 大 多 数 人 来 说 ，DHTML 便 是 HTML 4.0、CSS 样式 表 以 及 JavaScript 的 结合 
物 。 本 章 重点 介绍 使 用 CSS 样式 表 的 精髓 ， 主 要 知识 点 如 下 : 


了 解 
理解 
了 解 
掌握 


页 面 是 如 何 布 局 的 。 

层 的 意义 、 特 性 和 使 用 方式 。 
创建 框 模型 及 其 使 用 规律 和 特点 。 
CSS Hack。 

简单 的 布局 页 面 的 创建 。 


说 明 : HTML 4.0 和 CSS 样 式 表 已 经 在 前 面 章节 中 详细 介绍 过 , JavaScript 的 内 容 将 在 第 14 章 中 详细 介绍 。 


10.1 理解 块 级 的 意 》 


侣 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 理 解 块 级 的 意义 .wmv 

在 Web 设计 中 , 设计 者 使 用 CSS 来 修饰 页 面 的 内 容 , 而 与 CSS 相关 的 还 有 CSS-P (Cascading Style 
Sheets Positioning) ， 它 是 CSS 的 一 个 扩展 ， 表 示 如 何 布局 页 面 内 容 在 浏览 窗口 中 的 位 置 。 那 么 使 用 样 
式 表 是 如 何 工作 的 呢 ? 如 实例 10-1 所 示 为 通过 层 来 布局 页 面 。 

【实例 10-1】 本 实例 介绍 通过 层 来 布局 页 面 内 容 位 置 的 方法 。 


实例 10-1: 通过 层 来 布局 页 面 内容 位 置 的 方法 


民 | 源码 路 径 : 光盘 \ 源 文件 \10\10-1.html 


<head> 
<title> 了 解 通过 层 来 定位 页 面 内 容 的 位 置 </title> 
<style> 
#navigation { 
position:absolute; 
font:1em 幼 圆 bold; 
left:10; 
line-height:2em; 
width:8em; 
background:orange; 


} 
#content { margin-left:-8em; 
font:1.2em arial; 


// 定 位 层 在 页 面 中 的 位 置 


// 层 距离 窗口 10px 的 位 置 
// 设 置 行 高 


/设置 左边 距 


第 10 章 当 CSS 样式 表明 到 


45 border-left:0.1em orange dotted; 

16 +» 

17 </style> 

18 </head> 

19 <body> 

20 <div id=navigation> <!-- 导 航 栏 的 内 容 是 放 在 id 为 navigation 的 层 中 ---> 
2 <ul> 

22 <li> 目 录 一 

23 <li> 目 录 二 

24 <li> 目 录 三 

25 <li> 目 录 四 

26 <li> 目 录 五 

27 <li> 目 录 六 

28 <ldiv > 

29 <div id=content>&nbsp;&nbsp;&nbsp;&nbsp; 绰号 其 实 也 讲 历史 含 荀 ， 短 小 精 悍 

32 难 翻 译 给 其 他 国家 的 人 听 。.… … <!- 导 航 栏 的 内 容 是 放 在 id 为 navigation 的 层 中 ---> 
33 </div> 

34 </body> 

35</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.1 所 示 。 


EEC EYE 


京 说 卢 例 义 ， 人 上 下 五 千年 ， 


存 ' 来 人 qilin 到 
轮 到 玉 了 ， 还 得 琢磨 一 下 ， 到 底 是 说 肤色 呢 ， 泪 白 
站 四 导 介 区 和 到 了 这 也 是 个 难处 ， 


但 也 训 些 引号 ， 更 多 是 因为 间 汇 有 多 种 喜 思 ， 比 如 老 前 辈 J 
| 楼 士 ， 高 中 时 打球 就 席 抠 一 震 〈 特 此 鸣谢 黄 易 》 ， 王 气 十 足 ， 
投 得 村 准 ， 传 球 利索 ， 有 如 医生 手术 刀 段 秘 定 ， 于 是 外 号 
Doctor， 医 生 是 Doctor， 博 士 也 是 Doctor， 此 乃 弓 长 张 、 立 早 
章 。 三 百年 前 是 一 家 - 


这 短小 精怪 ， 很 难 翻译 给 其 他 图 家 的 


EC 
10.1 了 解 通过 层 来 定位 页 面 内 容 的 位 置 
【深入 学 习 】 在 该 实例 中 ， 注 意 第 20 行 、 第 28 行 、 第 29 行 和 第 33 行 中 的 <div>.…</div> 标 签 ， 
可 以 看 成 整个 窗口 是 由 这 两 个 层 布局 组 成 的 。 两 组 <div> 标 签 封装 了 各 自 对 象 的 样式 表 ， 再 通过 样式 表 
将 各 自 的 对 象 定位 在 网 站 中 不 同 的 位 置 。 这 种 布局 的 思路 就 是 所 说 的 “ 块 级 ”布局 ， 也 是 常 说 的 
CSS+DIV。 
说 明 : 实例 10-1 中 一 些 对 层 所 设置 的 样式 表 ， 其 中 的 属性 作用 会 在 后 面 的 章节 中 陆续 介绍 ， 这 里 读者 
只 需 明 白 层 是 如 何 表现 页 面 的 即 可 。 


| 


10.2 页 面 中 的 层 


CSS 样式 表 可 以 通过 被 封 在 层 里 的 方式 来 限制 页 面 所 修饰 的 内 容 。 这 就 是 说 ， 为 了 使 样式 表 只 对 


加 


ss 网 页 设计 评介 


页 面 局 部 起 修饰 作用 ， 设 计 者 可 以 将 页 面 的 局 部 内 容 定义 在 某 个 范围 中 ， 这 个 范围 便 称 为 CSS-layer 
(CSS 层 ) 。CSS 层 可 以 通过 HTML 标签 来 定义 ， 这 种 使 用 方法 是 Web 设计 中 的 一 枚 利器 。 


10.2.1 行 <span> 和 层 <div> 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 行 <span> 和 层 <div>.wmv 

设计 者 常 把 CSS 样式 表 放 在 <span> 和 <div> 这 两 个 布局 页 面 的 标签 中 , 它们 的 作用 是 使 样式 表 可 以 
只 对 标签 中 的 内 容 元 素 起 作用 。 这 两 者 的 区 别 是 <span> 标 签 是 指 行内 的 对 象 ， 而 <div> 标 签 针 对 的 是 层 
内 的 对 象 。 为 了 形象 地 说 明 什 么 是 行 标签 ， 这 里 通过 以 下 代码 展示 一 个 简单 的 实例 。 

<style> 

#color {color:red; 

} 

</style> 

《 爆 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ，<span id="color"> 但 是 当时 的 张爱玲 只 有 24 岁 。 

</span> 她 对 自己 的 自私 和 冷酷 ， 有 一 种 抽 离 。 
说 明 : 为 了 节约 书面 空间 ， 这 部 分 代码 只 给 出 了 关键 部 分 。 这 里 定义 了 一 个 color 的 样式 表 ， 通 过 id 选 

择 器 作用 于 <span> 标 签 内 的 文本 。 


结果 如 图 10.2 所 示 。 


攻 粕 祭 录 》 侧 是 一 个 历尽 沧 妆 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 和 冷酷 ， 有 一 种 杜 高 
10.2” <span> 标签 的 作用 


由 结果 可 见 ， 这 行文 本 只 有 <span> 标 签 中 间 的 内 容 被 修饰 了 。 如 实例 10-1 中 所 示 ， 第 20 一 28 行 
代码 只 是 修饰 了 页 面 中 的 左 侧 导航 栏 ， 这 就 是 <div> 标 签 的 作用 。 


注意 : 如 果 <div> 标 签 中 没有 引用 样式 表 ， 那 么 ， 其 作用 就 相当 于 <p> 标 签 。 


10.2.2 层 的 基本 定位 


茹 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 10 章 \ 层 的 基本 定位 .wmv 

通过 一 些 基 本 的 属性 可 以 将 层 定位 在 页 面 中 的 任何 位 置 ， 这些 主 要 的 属性 有 方位 属性 ， 如 层 的 左 、 
右 、 上 、 下 ; 描述 大 小 的 属性 ， 如 层 的 宽 、 高 、 参 照 位 置 。 

left: 相当 于 窗口 左边 的 位 置 。 

right: 相当 于 窗口 右边 的 位 置 。 

top: 相当 于 窗口 上 边 的 位 置 。 

bottom: 相当 于 窗口 下 边 的 位 置 。 

width: 表示 层 的 宽度 。 

height: 表示 层 的 高 度 。 

position: 用 来 控制 采用 什么 样 的 方式 定位 图 层 。 

position 属性 的 属性 值 有 absolute、relative 和 static 3 个 。absolute 表示 层 的 位 置 以 网 页 的 左上 角 为 
基准 来 设置 ，relative 表示 层 的 位 置 以 其 原始 值 的 位 置 来 设置 ; static 表示 层 的 位 置 以 HTML 默认 的 位 


®_ 


置 来 设置 。 


第 10 章 当 CSS 梓 式 到 话 可 于 了 ooo 


事实 上 ， 只 要 通过 left 和 top 属性 就 可 以 控制 层 在 页 面 中 的 位 置 了 ， 而 通过 width 和 height 属性 设 


置 层 的 大 小 ， 如 实例 10-2 所 示 。 
【实例 10-2】 本 实例 介绍 层 的 基本 定位 。 


实例 10-2: 层 的 基本 定位 
源码 路 径 : 光盘 \ 源 文件 \10\10-2.html 


// 距 离 窗 口 左 边 5em 〈em 参考 7.3.2 节 ) 来 定位 页 面 内 容 的 位 置 


1 -<html> 

2 <head> 

3 <title> 层 的 定位 </title> 

一 </head> 

5 <style> 

6 div {position:absolute; /以 浏览 器 窗口 为 基准 设置 

了 车 width:300px; 

8 height:300px; 

9 left:-5em; 

10 top:5em; 

1 } 

12 </style> 

13 <body> 

14 <div> 

15 ”夕阳 武士 为 了 筹措 盘 缠 回 故乡 而 出 战马 贼 ， 但 小 时 医生 的 告诫 他 会 在 这 一 年 失明 ， 虽 然 光 线 在 
16 ”他 的 眼中 已 经 日 渐 展 暗 ， 但 他 还 是 坚持 出 战 最 终 战 死 。 欧 阳 峰 很 奇怪 他 为 何 要 急 着 赶 回去 ? 武 
17 “” 士 回 答 说 家 乡 的 桃花 很 美 ， 他 要 回去 看 桃花 ! 欧阳 峰 好 奇 去 了 武士 的 家 乡 ， 发 现 那里 根本 没有 
18 桃花， 只 有 一 个 女人 ， 她 的 名 字 叫 做 桃花 .…… 

19 </div> 

20 </body> 

21 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.3 所 示 。 
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图 10.3 层 的 定位 


【深入 学 习 】 如 图 10.3 所 示 ， 网 页 中 文本 距离 窗口 顶 
长 度 和 宽度 都 是 300px。 


i 部 是 5em， 距 离 窗 口 左 侧 是 5em， 文 本 层 的 


如 果 需 要 把 很 多 个 层 放 在 页 面 中 ， 这 就 是 一 个 最 简单 的 布局 页 面 的 方法 。 


注意 : 在 层 中 ,文本 内 容 不 足 height 属 性 下 的 高 度 时 ， 层 的 大 小 会 默认 为 300px; 如 果 层 中 的 内 容 超出 
height 属 性 下 的 高 度 时 ， 浏 览 器 会 自动 修改 原始 层 的 高 度 来 适应 文本 的 内 容 。 


9) 
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10.2.3 ” 层 的 又 加 


亏 H 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 层 的 登 加 .wmv 
层 不 同 于 表格 、 框 架 的 最 大 优势 在 于 层 是 可 以 三 加 的 。 这 是 因为 层 具有 一 个 “Z 轴 ” 的 特性 ，Z 轴 
好 比 3D 坐标 中 的 乙 轴 , 是 一 个 上 下 层级 的 关系 , 就 是 说 一 个 层 可 以 覆盖 在 另 一 个 层 上 面 , 如 图 10.4 所 示 。 


如 


图 10.4 层 且 示意 图 
果 有 3 个 层 ， 并 按 图 10.4 所 示 依 次 堆 释 ,浏览 器 中 最 终 显示 的 是 divl 层 中 定义 的 内 容 。 其 从 加 


规律 是 ， 在 <body> 标 签 中 ， 根 据 层 依次 出 现 的 顺序 来 判定 层 的 上 下 级 关系 。 定 义 层 琶 加 具体 的 使 用 方 
法 如 实例 10-3 所 示 。 
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实例 10-3】 本 实例 介绍 层 的 簿 加 。 


re 实例 10-3: 层 的 又 加 
源码 路 径 : 光盘 \ 源 文件 ,10\10-3 html 


<head> 
<title> 层 的 全 加 </title> 
</head> 
<style> 
div {height:300; 
width:300; 


} 

#d1 {position:absolute; // 定 位 页 面 层 位 置 的 属性 
background-color:green; 
left:2em; /距离 窗口 左边 2em 来 定位 页 面 内 容 的 位 置 
top:2em; 


b 
#d2 {position:absolute; 

background-color:blue; 

left:4em; /距离 窗口 左边 4em 来 定位 页 面 内 容 的 位 置 

top:4em; 

} 

#d3 {position:absolute; 

background-color:red; 
left:6em; // 距 离 窗口 左边 6em 来 定位 页 面 内 容 的 位 置 
top:6em; 
} 


第 10 章 当 CSS 样式 表 遇 到 层 


24 </style> 

25 <body> 

26 <div id="d1"> <!-- 定 义 为 最 下 面 的 层 --> 
27 i 这 < 上 -定义 为 中 间 的 层 -> 
28 <div id="d3"> <!-- 定 义 为 最 上 面 的 层 --> 
29 </body> 

30 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.5 所 示 。 


图 10.5 层 谷 的 关系 
【深入 学 习 ]】 在 该 实例 中 ， 首 先 写 入 的 是 代码 第 26 行 ， 表 明 最 先 放 入 页 面 的 是 dl 层 ， 代 码 第 28 行 
最 后 写 入 ， 即 表明 最 后 放 入 页 面 的 是 d3 层 。 所 以 , 层 的 又 加 顺序 是 dl 层 在 最 下 面 , 而 d3 层 在 最 上 面 。 
技巧 : 如 果 设 计 者 希望 在 页 面 中 改变 登 加 的 顺序 而 不 受 先后 定义 的 约束 ， 可 以 使 用 z-index 属 性 ， 该 属 
性 表明 层 在 Z 轴 上 的 登 放 位 置 。 如 上 述 代码 中 ， 如 果 在 任何 一 块 样式 表 中 添加 z-index:1， 例 如 ， 
在 代码 第 19 行 中 d3 样 式 表 中 添加 ， 那 么 d3 块 的 层 将 会 被 排放 在 最 下 面 一 层 。 


10.3 框 模 型 


层 的 内 部 便 是 一 个 框 模型 (box model) ， 这 个 概念 很 重要 。 在 CSS 广泛 应 用 之 前 ， 建 立 一 个 出 色 
的 页 面 布局 只 能 通过 框架 集 、 表 格 ， 大 量 内 嵌 表 格 框架 ， 或 者 大 量 的 <p> 标 签 和 空格 符号 来 完成 。 而 当 
有 了 层 的 框 模型 思路 布局 后 ， 设 计 者 们 就 找到 了 最 好 的 选择 。 有 时 它 完全 可 以 替代 框架 、 表 格 等 。 这 
种 方法 不 仅 可 以 使 页 面 代 码 精 简 ， 而 且 大 大 缩短 了 页 面 的 刷新 时 间 ， 这 样 更 易于 管理 代码 。 


10.3.1 理解 框 模型 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 10 章 \ 理 解 框 模型 .wmv 
层 中 内 容 的 外 面 被 很 多 空间 级 概念 的 物质 包围 , 如 空 距 (padding) 、 边框 (border) 和 边 距 (margin) 。 


MLHCSS 网 页 设计 详解 


空 距 就 是 页 面 内 容 距 离 边框 的 位 置 ， 边 距 就 是 边框 以 外 的 距离 。 页 面 中 任意 一 个 层 中 内 容 的 周围 理论 


上 是 被 这 样 包围 的 ， 如 图 10.6 所 示 。 


或 者 一 幅 图 像 、 一 个 表格 ， 甚 至 是 框架 集 ， 当 


区 | 实例 10-4: 设置 框 模型 的 大 小 


图 10.6 框 模型 
页 面 内 容 可 以 为 层 中 任何 内 容 。 如 果 设 计 者 愿意 ， 可 以 用 其 他 元 素 蔡 代 页 面 内 容 ， 如 一 段 文本 ， 


源码 路 径 : 光盘 \ 源 文件 \10\10-4.html 


1 
2 <head> 

3 <title> 框 模型 的 大 小 </title> 
4 <style> 

5  #af{background-color: #F9C; 

6 width:20em; 

区 height:10em; 

8 padding:1em ; 

9 border:1em solid #99F; 
10 margin:1em; 


} 
12 #b {background-color: #F9C; 
3 width:20em; 
14 height:13em; 
15 padding:3em; 
16 border:1em solid #99F:; 
条 margin:3em; 


18 } 

19 </style> 

20 </head> 

21 <body> 

2 <div id="a"> 


23 ”《 熔 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 


24 ”和 冷酷 ， 有 一 种 抽 离 。 
25 </div> 

26 <p> 

人 人 <div id="b"> 
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// 空 距 的 距离 是 lem 
// 边 框 的 宽度 是 1lem 
// 边 距 的 宽度 是 1lem 


// 空 距 的 距离 是 3em 
// 边 框 的 宽度 是 1lem 
// 边 距 的 宽度 是 3em 


也 可 以 是 一 个 层 。 而 为 了 精确 布局 页 面 ， 了 解 框 模型 
的 大 小 在 页 面 中 的 表现 ， 可 以 参考 实例 10-4， 该 例 给 出 的 一 个 框 模型 的 简单 实例 。 
【实例 10-4】 本 实例 设置 框 模型 的 大 小 。 


第 10 章 当 CSS 样式 表 ; 


28 ”《 爆 余 录 》 像 是 一 个 历尽 沧桑 的 百 岁 老人 所 写 ， 但 是 当时 的 张爱玲 只 有 24 岁 。 她 对 自己 的 自私 
29 ”和 冷酷 ， 有 一 种 抽 离 。 

30 </div> 

31 </lbody> 

32 ”</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.7 所 示 。 
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10.7” 框 模型 的 大 小 
注意 : 在 这 里 height 属 性 值 是 指 从 边框 上 沿 (border ) 到 边框 下 沿 的 距离 。 


【深入 学 习 】 如 图 10.7 所 示 ， 层 的 实际 高 度 是 “ 层 中 页 面 内 容 的 高 度 + 上 空 距 + 上 边框 + 上 边 距 + 下 
空 距 + 下 边框 + 下 边 距 ”的 值 。 

第 一 个 层 中 ， 如 果 事 先 设 定 的 height 属性 值 超 出 层 中 上 下 边框 之 间 的 距离 ， 那 么 页 面 内 容 会 以 空 
白 部 分 填补 缺少 的 高 度 ， 最 终 令 层 的 上 下 边框 之 间 的 距离 等 于 height 属性 值 。 如 图 10.7 中 上 面 第 一 个 
层 ,页 面 内 容 即 文本 的 高 度 为 4em， 上 边框 + 上 空 距 + 下 边框 + 下 空 距 为 4em。 这 样 实际 层 的 上 下 边框 之 
间 的 距离 是 8em， 而 height 属性 设置 为 10em， 所 以 层 中 文本 内 容 会 补 齐 2em 高 度 。 

而 第 二 个 层 设置 的 高 度 正好 符合 上 下 边框 的 距离 , 所 以 层 中 文本 没有 出 现 多 余 的 空 行 。 如 果 height 
的 属性 值 小 于 层 的 上 下 边框 之 间 的 距离 , 这 时 height 属性 值 便 失去 作用 。 例 如 , 样式 表 “ 部 ”中 ,height 
设置 为 10em， 因 此 ，height 值 将 不 起 作用 。 第 二 层 的 样式 不 会 发 生 改 变 。 

此 外 ， 如 果 上 下 两 层 放 在 一 起 ， 那 么 两 个 层 的 边 距 (margin) 将 会 出 现 合并 ， 最 终 以 较 大 的 边 距 
为 标准 。 如 图 10.7 所 示 ， 上 下 层 之 间 的 距离 是 3em， 而 并 非 3em+lem=4em。 


注意 : 页 面 内 容 占 据 的 空间 是 由 width 和 height 属 性 设置 的 ， 而 内 容 周 围 的 边 距 padding 和 边框 border 值 
是 另外 计算 的 。 但 是 在 正 浏览 器 中 ，width 和 height 属 性 是 包括 边 距 和 边框 的 长 度 的 。 


10.3.2” 空 距 padding 属性 


允 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 空 距 padding 属性 .wmv 
padding 属性 又 常 被 称 为 内 边 距 -padding 属性 可 以 细 分 为 padding-top、padding-right、padding-bottom 


_ 回 ) 


ss na at 


和 


padding-left 4 个 属性 ， 通 过 它们 可 以 控制 一 个 框 模型 中 的 每 一 边 空 距 。 例 如 ， 


“padding-bottom:1.5em;”。 此 外 ， 为 了 方便 ， 设 计 者 可 以 使 用 快捷 的 写法 来 分 别 设置 4 条 边 ， 如 下 
所 示 。 


当 padding 只 定义 1 个 数值 时 ， 例 如 : 
padding:1em; 


表示 所 有 框 模 型 空 距 为 lem。 

当 padding 定义 2 个 数值 时 ， 例 如 : 

padding:1em 2em; 

表示 所 有 框 模型 空 距 顶 边 和 底 边 为 l em， 左边 和 右边 为 2em。 

当 padding 定义 3 个 数值 时 ， 例 如 : 

padding:1em 2em 3em; 

表示 所 有 框 模型 空 距 顶 边 为 em， 左边 和 右边 为 2em， 底 边 为 3em。 

当 padding 定义 4 个 数值 时 ， 例 如 : 

padding:1em 2em 3em 4em; 

表示 所 有 框 模型 空 距 将 按照 顺 时 针 方向 ， 由 项 边 为 lem 开始 ， 依 次 右边 为 2em、 底 边 为 3em 和 左 


边 为 4em。 


此 外 , 还 有 一 个 有 趣 的 用 法 ,就 是 借助 padding 属性 可 以 使 用 自 定义 图 像 来 作为 空 距 。 但 是 在 浏览 


器 中 这 种 方法 只 能 定义 其 中 的 一 条 边 ， 如 实例 10-5 中 使 用 自 定义 图 像 来 修改 边 距 的 样式 。 
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【实例 10-5】 本 实例 使 用 自 定义 图 像 作为 空 距 。 
G0 “实例 10-5: 使 用 自 定 久 图像 人 为 字 
源码 路 径 : 光盘 \ 源 文件 \10\10-5.html 


1 <html> 

4 <head> 

3 <title> 使 用 自 定义 图 像 来 作为 空 距 </title> 

4 <style> 

3 body {text-align:center; 

6 line-height:20px; // 设 置 文本 的 行 高 
white-space: pre; // 相 当 于 <pre> 标 签 的 作用 
8 

9 h1 {font:1.5em 宋体 ; 

10 } 

El h2t{font:1em 幼 圆 ; 

但 } 

13 #c {margin-left:40px; // 定 义 层 中 文本 的 位 置 

14 padding-left:20px; // 定 义 左边 空 距 的 位 置 

15 background:url( 小 图 标 .jpg) left repeat-y; ”// 使 用 自 定义 图 像 设置 左 边 空 距 
16 } 

这 </style> 

18 </head> 
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19 <body> 

20 <div id="c"> 

| <h1> 将 进 酒 </h1> 
22 <h2> 李 白 </h2> 


23 ”<br> 君 不 见 黄河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。 
24 ”<br> 君 不 见 高 堂 明镜 翡 白 发 ， 朝 如 青丝 暮 成 雪 。 
25 ”<br> 人 生得 意 须 尽 欢 ， 莫 使 金 樟 空 对 月 。 
26 ”<br> 天 生 我 材 必 有 用 ， 千 金 散 尽 还 复 来 。 


0 
28 </div> 
29 </lbody> 
30 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.8 所 示 。 
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茂 100% 一 

10.8 使 用 自 定 义 图 像 来 作为 空 距 
说 明 : 代码 第 7 行 中 “white-space: pre;” 的 作用 是 保持 HTML 源 代码 的 空格 与 换行 ， 等 同 于 <pre> 标 签 。 
【深入 学 习 】 图 10.8 中 左 侧 一 栏 便 是 使 用 自 定义 图 像 设 置 的 。 由 于 这 种 使 用 方法 只 能 定义 4 条 边 


中 的 一 条 ， 所 以 在 框 模型 中 就 显得 不 是 那么 实用 了 。 如 果 希 望 制作 4 条 自 定义 图 像 的 边框 ， 更 好 的 办 
法 是 使 用 已 经 做 好 的 PNG 图 像 或 者 GIF 图 像 。 


说 明 : padding-bottom 可 以 用 来 修饰 超 链接 下 划 线 ， 具 体 可 参考 第 6 章 的 内 容 。 
10.3.3 边框 border 的 扩展 属性 


锯 H 知 识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 边 框 border 的 扩展 属性 .wmv 
border 是 一 种 使 用 频率 非常 高 的 属性 ， 可 用 于 表格 、 边 框 中 。 对 于 边框 ， 不 仅仅 可 以 改变 它 的 宽 
度 ， 而 且 可 以 指定 其 格式 和 颜色 (参考 第 8 章 的 内 容 ) 。 所 以 ， 边 框 的 属性 具有 多 样式 的 扩展 ， 其 属 
性 可 以 细 分 为 border-width、border-style 和 border-color 属性 。 
® 


border-width: 表示 边框 的 宽度 。 


border-style: 表示 边框 的 样式 ， 常 用 的 有 solid、dotted 和 dashed 等 。 
borde-color: 表示 边框 的 颜色 。 


注意 : 默认 情况 下 ， 边 框 的 属性 是 none。 


同样 ， 也 可 以 像 padding 属性 那样 ， 采 用 快捷 方式 来 定义 边框 ， 例 如 : 
border:3px dotted red; 


或 者 使 用 快捷 方式 定义 每 一 条 边框 ， 例 如 : 
border:1em 2em 3em 4em; 


说 明 : CSS 2.1 中 指出 ， 页 面 内 容 的 背景 是 由 内 容 、 内 边 距 和 边框 区 的 背景 组 成 的 。 大 多 数 浏览 器 都 遵 
循 CSS 2.1 定 义 ， 不 过 一 些 较 老 的 浏览 器 可 能 会 有 不 同 的 表现 。 


10.3.4 边 距 (margin) 


鳃 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 边 距 ( margin ) .wmv 

margin 属性 又 称 为 外 边 距 ， 就 好 像 是 围绕 在 边框 范围 外 的 一 层 “ 空 气 ”。padding 属性 值 不 能 为 负 
值 ， 而 margin 属性 值 可 以 为 负 值 ， 以 此 对 内 容 进 行 琶 加 。 前 面 已 经 有 所 提 及 ， 如 果 两 个 或 者 两 个 以 上 
的 纵 边 距 紧 挨 在 一 起 时 ， 那 么 彼此 相 邻 的 边 距 会 发 生 合并 现象 ， 最 终 彼此 边框 之 问 的 距离 为 两 个 边 距 
较 大 的 边 距 宽度 ， 而 非 两 个 边 距 之 和 。 

类 似 于 空 距 和 边框 ， 边 距 属 性 也 可 以 细 分 为 上 、 下 、 左 、 右 4 条 边 来 分 别 控制 。 分 别 是 上 边框 属 
性 margin-top、 下 边框 属性 margin-bottom、 左 边框 属性 margin-left 和 右边 框 属性 margin-right 。 

此 外 ， 如 果 两 个 不 同 页 面 内 容 的 边 距 彼此 上 下 相 邻 时 ， 也 会 发 生 合并 现象 。 为 了 解决 这 个 问题 ， 
可 以 在 其 中 的 一 个 页 面 内 容 中 添加 边框 或 者 空 距 ， 来 隔 开 两 个 边 距 接触 ， 如 实例 10-6 所 示 。 

【实例 10-6】 本 实例 设置 不 同 页 面 内 容 的 边 距 相 邻 。 


re 实例 10-6: 设置 不 同 页 面 内 容 的 边 距 相 令 
源码 路 径 : 光盘 \ 源 文件 ,10\10-6html 


1 <html> 

这 <head> 

3 <title> 不 同 页 面 内 容 的 边 距 相 邻 </title> 

4 <style> 

5 #d {margin:2em; // 边 距 设 置 为 2em 
6 background:cyan; 

区 border:1px solid; /设置 边框 的 样式 
8 } 

9 p {margin:1em ; // 边 距 设 置 为 lem 
10 background:yellow; 

11 } 

2 </style> 

13 </head> 

14 <body> 

15 <div id="d"> 

16 <p> 
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曾 听 过 一 个 故事 … 
</div> 
</body> 
</html> 
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【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.9 所 示 。 
【深入 学 习 】 如 果 这 段 代码 中 缺少 了 第 7 行 代码 对 边框 的 设 定 ， 层 〈div) 的 边 距 和 文本 的 边 距 彼 
此 相 接 ， 则 层 的 边 距 会 被 合并 ， 如 图 10.10 所 示 。 


( rm 
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文件 而。 移 加 |E) 二 看 (/) 收藏 才 A) 工具 Mm 二 到 (H) 


ION Rl00% 


图 10.9 不 同 页 面 内 容 的 边 距 相 邻 图 10.10 错误 的 合并 方式 
10.3.5” 框 模型 的 溢出 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 框 模型 的 溢出 .wmv 

有 时 候 ， 如 果 层 中 的 内 容 太 多 ， 以 至 于 超出 层 的 初始 设 定 范围 时 , 下 浏览 器 会 自动 拉 伸 层 的 范围 。 
为 了 改变 这 种 情况 ， 令 层 的 大 小 不 会 发 生 改 变 ， 可 以 使 用 overflow 属性 。 在 默认 情况 下 ，overflow 属 
性 值 为 visible， 意 思 是 页 面 内 容 都 是 可 见 的 。 所 以 ， 这 是 层 的 大 小 失去 控制 的 原因 ， 如 实例 10-7 的 
overflow 属性 所 示 。 

【实例 10-7】 本 实例 使 用 overflow 属性 来 设置 框 模型 的 溢出 。 


<head> 


实例 10-7: 使 用 overflow 属性 来 设置 框 模型 的 溢出 
源码 路 径 : 光盘 \ 源 文件 \10\10-7.html 


<title> 使 用 overflow 属性 </title> 


<style> 
#d {margin:2em; 
height:20em; 
width:30em; 
background:cyan; 
overflow:auto; 
上 
</style> 
</head> 
<body> 
<div id="d"> 


<p> 
对 冲 基金 (Hedge Fund) 


1/ 设置 边 距 大 小 

// 设 置 页 面 高 度 

// 设 置 页 面 宽度 
/设置 页 面 背景 颜色 
/自动 控制 页 面 的 滚动 条 


17 </div> 
18 </body> 
19 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.11 所 示 。 它 像 浮 动 框架 一 样 内 嵌 在 页 面 中 。 从 这 点 来 说 ， 
CSS 2.0 之 后 所 进行 的 页 面 设计 中 ， 使 用 对 层 的 框 模型 的 创建 使 框架 集 的 使 用 次 数 大 大 降低 。 
| 


E DE PerwrcsrkP - EL ecw 必 性 "| A 
太 个 (有 适 呈 IF) 至 吾 (V) 由 二 A) 工具 TD) 共 动 H) 


图 10.11 使 用 overflow 属性 


技巧 : 如 上 面 第 8 行 代 码 ， 将 overflow 属 性 值 设置 为 auto， 则 窗口 会 根据 页 面 内 容 的 多 少 来 决定 于 是 否 
出 现 滚动 条 。 此 外 ,overflow 属 性 值 还 可 以 设置 为 hidden 和 scroll， 前 者 会 严格 按照 属性 性 质 来 设 
定 框 的 大 小 ， 超 出 的 内 容 将 会 被 隐藏 。 而 后 者 页 面 内 容 无 论 是 否 溢出 框架 ， 都 将 显示 滚动 条 。 


10.4 定制 层 的 display 属性 


健 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 10 章 \ 定 制 层 的 display 属性 .wmv 

前 面 已 经 了 解 到 ， 层 的 表现 是 通过 “ 框 ” 这 种 结构 实现 的 。 框 可 以 是 块 级 对 象 (block element) ， 
也 可 以 是 行内 对 象 inline element) 。 那 么 所 谓 display 属性 就 是 用 来 控制 其 中 的 内 容 是 块 级 还 是 行 级 。 
所 以 ， 基 本 的 定义 为 block， 表 现 为 块 级 ， 或 者 定义 为 inline， 表 现 为 行 级 ， 默 认 情况 下 是 none， 表 现 
为 不 显示 框 ， 代 码 如 下 : 

display:block; 


在 第 7 章 的 内 容 中 已 经 讲解 了 使 用 display 属性 来 设计 导航 栏 的 方法 , 其 中 的 原理 正 是 因为 display 
属性 的 行内 inline 的 作用 ， 设 计 者 可 以 将 框 中 任何 一 个 对 象 设置 成 所 选择 的 类 型 ， 如 实例 10-8 中 展示 
的 display 属性 所 示 。 

【实例 10-8】 本 实例 为 不 同 的 层 设置 不 同 的 display 属性 。 


rel 实例 10-8: 为 不 同 的 层 设置 不 同 的 display 属性 
源码 路 径 : 光盘 \ 源 文件 \10\10-8.html 


第 10 章 当 CSS 样式 表 巡 a 必 
;| <html > 
2 <head> 
< <title>display 属性 </title> 
4 <style type="text/css"> 
5 body { 
6 text-align:"center"; 
区 font: 80% 黑体 ; 
8 
9 h1 {font-size: 2em; // 设 置 字体 大 小 
10 } 
4 | h2 {font-size: 1.5em; 
届 } 
13 #kuai, #hang {background: silver; 
14 border 2px solid black; 。“”//#kuai 和 #hang 对 象 的 边框 样式 
1 } 
16 span { background: white; 
17 display: block; // 设 置 为 块 级 对 象 
18 border 0.5em dashed green; /设置 span 对 象 边框 的 样式 
19 padding: 1em; 
20 margin: 0.5em; 
21 } 
22 span.yanse { 
23 background: yellow; // 行 内 对 象 的 背景 颜色 
24 } 
25 #hang span { 
26 display: inline; // 设 置 为 行内 对 象 
27 } 
28 </style> 
29 </head> 
30 <body> 
31 <h1 >“ 块 ”和 “ 行 ” </h1> 
32 <h2> 块 </h2> 
33 <p id="kuai"><span> 北 京 </span><span class="yanse" > 上海 </span><span> 香 港 
34 </span><span class="yanse"> 海 南 </span></p> 
35 <h2> 行 </h2> 
36 <p id="hang"><span> 北 京 </span><span class="yanse"> 上 海 </span><span> 香 港 
37 </span><span class="yanse"> 海 南 </span></p> 
38 </body> 
39 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.12 所 示 。 
注意 : 定义 为 行内 对 象 的 框 模型 ， 在 默认 情况 下 将 忽视 纵向 上 的 边 距 。 如 图 10.12 所 示 ， 空 距 和 边框 将 


会 超出 所 在 的 行 。 


【深入 学 习 】 代 码 第 33 行 和 第 34 行 定义 了 其 中 的 文本 为 块 级 对 象 ， 引 用 了 kuai 样式 表 。 在 页 面 
中 可 以 看 到 ，<span> 标 签 内 的 文本 是 以 纵 排 依次 排列 ， 即 块 级 样式 。 而 代码 第 36 行 和 第 37 行 中 的 内 


容 为 hang 样式 表 的 对 象 。 在 页 面 中 的 效果 如 图 10.12 所 示 ， 行 的 样式 为 依次 横向 排列 。 
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图 10.12 display 属性 
为 了 防止 这 种 浇 出 的 情况 ，inline 属性 扩展 出 inline-block。 顾 名 思 义 ， 该 属性 是 为 了 将 行内 对 象 中 
的 内 容 定义 为 “行内 框 ”。 所 以 ， 如 果 将 代码 第 26 行 改 为 “display:inline-block;”， 那 么 将 表现 为 如 
图 10.13 所 示 的 效果 。 


10.13 inline-block 属性 


10.5 CSS Hack 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \CSS Hack.wmv 

目前 ， 较 流行 的 浏览 器 主要 有 正 、Firefox、Opera 以 及 Google 浏览 器 ， 它 们 基于 不 同 的 内 核 ， 对 
CSS 的 解析 也 不 一 样 ， 这 直接 导致 生成 的 页 面 效 果 不 同 。 例 如 ， 最 直接 的 影响 就 体现 在 框 模型 中 对 距 
离 的 理解 ， 这 对 设计 者 来 说 ， 是 很 伤 脑筋 的 一 件 事 。 怎 样 才 能 够 解决 浏览 器 兼容 的 问题 呢 ? 只 能 针对 
于 不 同 的 浏览 器 写 不 同 的 样式 表 ， 这 种 写法 被 称 为 CSS Hack。 

尽管 有 许多 Hack 针对 不 同 的 浏览 器 提供 了 解决 方案 ， 例 如 ,在 解决 正 浏览 器 和 Firefox 浏览 器 中 
布局 不 同 的 问题 时 ， 常 用 的 一 个 是 !important。 由 于 !important 不 被 正 支持 ， 而 其 他 浏览 器 可 以 支持 ， 
使 用 这 个 特性 可 以 用 来 解决 很 多 问题 ,如 有 时 在 定义 padding 对 象 时 ,在 正 浏览 器 和 Firefox 中 有 误差 ， 
则 设计 者 先 制定 能 被 非 正 浏览 器 识别 的 声明 ， 再 添加 一 个 正 也 能 识别 的 声明 。 其 中 需要 注意 CSS 的 
先后 声明 顺序 ， 下 面 通过 实例 10-9 来 说 明 如 何 使 用 Hack。 

【实例 10-9】 本 实例 介绍 使 用 Hack 的 方法 。 


® 


sus sc HE, 
区 : 实例 10-9: 使 用 Hack 的 方法 
源码 路 径 : 光盘 \ 源 文件 \10\10-9.html 


1 <html> 

区 <head> 

3 <title>CSS Hack</title> 

一 <style> 

5 .select {border:20px ”solid navy !important; /设置 Hack 中 的 边框 样式 
6 width:230px !important; /设置 Hack 中 的 宽度 
压 padding:20px !important; /设置 Hack 中 的 空 距 
8 border:20px solid orange; // 设 置 边框 样式 

9 width:300px; /设置 宽度 

10 padding:20px; // 设 置 空 距 

11 font;1.5em 新 宋体 ; 

12 text-align:center; 

13 } 

14 </style> 

15 </head> 

16 <body> 


17 <div class="select"> 在 Firefox 中 的 效果 是 蓝 色 边框 ， 它 的 width 设置 为 14em。 
18 而 在 IE 10 浏览 器 中 的 效果 是 橙色 边框 ， 它 的 width 设置 为 20em。</div> 


19 </body> 

20 </html> 

【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 10.14 所 示 。 
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10.14 使 用 CSS Hack 的 页 面 效果 


【深入 学 习 】 图 10.14 中 左 侧 是 Firefox 中 的 页 面 效果 ， 右 侧 是 在 正 10 浏览 器 中 的 页 面 效果 。 如 
代码 第 5 一 7 行 中 , 由 于 声明 中 附加 了 !important, 所 以 正 浏览 器 无 法 分 析 声 明 。 而 Firefox 接受 了 信息 
所 以 在 浏览 器 中 显示 出 蓝 色 的 边框 。 正 浏览 器 接受 了 第 8 一 10 行 中 的 代码 声明 ， 所 以 在 浏览 器 中 显示 
出 橙色 边框 。 

此 外 ， 从 效果 上 看 ， 两 个 边框 的 大 小 是 一 样 的 。 但 是 在 代码 中 可 以 看 到 ， 它 们 被 设置 成 不 同 的 宽 
度 ， 造 成 这 种 不 同 的 原因 就 是 因为 浏览 器 之 间 的 差异 。 但 对 设计 者 来 说 ， 糟 糕 的 是 只 能 花 些 时 间 和 而 
心 去 测试 不 同 的 页 面 效果 并 进行 调整 。 所 以 设计 者 在 制作 页 面 时 ， 要 尽量 避免 使 用 Hack。 


注意 : 随 着 浏览 器 的 不 断 升级 和 创新 ，CSS Hack 也 在 不 断 地 变化 之 中 ， 也 许 某 一 标签 的 作用 将 被 所 有 
浏览 器 统一 ， 又 或 许 出 现 新 的 技术 而 某 些 浏览 器 无 法 使 用 。 作 为 设计 者 ， 也 只 能 希望 W3C 组 织 
来 统一 Web 的 标准 。 
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10.6 案例 : 简单 的 CSS+DIV 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 10 章 \ 案 例 : 简单 的 CSS+DIV.wmv 

从 本 章 开始 ， 读 者 应 该 习惯 当 谈 到 页 面 布局 这 样 的 问题 时 ， 首 先 想到 的 是 CSS 和 层 的 配合 使 用 。 
本 节 使 用 前 面 所 学 的 知识 制作 一 个 简单 的 三 栏 式 布局 的 页 面 ， 如 实例 10-10 所 示 。 相 对 于 本 章 开 始 的 
两 栏 布局 ， 三 栏 布局 并 不 只 是 多 加 了 一 个 层 。 在 该 案例 中 ， 要 注意 三 栏 布局 在 数字 上 的 巧妙 安排 ， 如 
果 数 字 排 得 不 够 精确 ， 页 面 也 许 会 变 得 “面目 全 非 ”。 

【实例 10-10】 本 实例 是 三 栏 布局 下 的 页 面 。 


re 实例 10-10: 三 栏 布局 下 的 页 面 
源码 路 径 : 光盘 \ 源 文件 \10\10-10.html 


1 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 StricW/EN" 

4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

3 “<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

- <head> 

5 <title> 使 用 CSS+DIV 布局 页 面 </title> 

6 <style type="text/css" > 

区 #header {background: silver; // 页 面 头 部 的 样式 表 

8 下 

9 #footer {background: gray; // 页 面 底部 的 样式 表 

10 } 

11 body {font: 80% ”微软 雅 黑 ; 

有 margin: 0; 

13 1 

14 h1,h2 {margin-top: 0; 

15 

16 #oneBlock {font-size:1.5em ; // 页 面 主题 左 侧 的 导航 栏 
他 position: absolute; 

18 left: 0; /距离 页 面 左 侧 的 距离 为 0 
19 padding:20px; 

20 width: 130px; height:300px; 

| background-color:orange; 

22 上 

23 #twoBlock {font-size:1.5em; // 页 面 主题 左 侧 的 导航 栏 
24 position: absolute; 

25 right: 0; // 距 离 页 面 右 侧 的 距离 为 0 
26 padding-right:10px; padding-top:20px; 

7 width: 135px;height:500px; 

28 background-color:orange; 

29 } 

30 #content {text-indent:25px; // 首 字母 缩 进 

El margin: 0 180px 0 200px; 

32 

33 </style> 

34 </head> 

35 <body> 

36 <div id="header"> 使 用 CSS+DIV 布局 页 面 </div> 
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37 <div id="oneBlock"> 
38 <ul> 
39 <li><a href="> 北 京 </a></li> 
40 <li><a href="> 上 海 </a></li> 
41 <li><a href="> 香 港 </a></li> 
42 </ul> 
43 </div> 
44 <div id="twoBlock"> 
45 <ul> 
46 <li><a href="">Beijing</a></li> 
47 <li><a href=">Shanghai</a></li> 
48 <li><a href=">Hongkong</a></li> 
49 </ul> 
50 </div> 
51 <div id="content"> 
52 <h1> 中 国 </h1> 
53 <h2> 北 京 </h2> 
54 北京 位 于 华北 平原 与 东北 平原 、 蒙 古 高 原 的 交接 处 ， 
0 
56 <h2> 上 海 </h2> 
57 原来 的 上 海 只 是 一 个 以 渔业 和 棉纺 织 手 工业 为 营 的 小 镇 ，19 世纪 
0 
59 <h2> 香 港 </h2> 
60 香港 是 国际 的 金融 中 心 之 一 ， 金 融 机 构 和 市 场 紧密 联系 。 
ye 
62 </div> 
63 <p> 
64 <div id="footer">&nbsp; 
65 </div> 
66 </body> 
67 </html> 
【运行 程序 】 浏 览 该 页 面 ， 运 行 效果 如 图 10.15 所 示 。 
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图 10.15 三 栏 式 布局 
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【深入 学 习 ] 在 该 实例 中 ， 代 码 第 7 一 10 行 中 的 两 个 样式 表 # 抽 eader 和 #footer 首先 定义 了 页 面 头 尾 
的 BANNER .该 例 的 难点 在 于 代码 第 16 一 22 行 的 样式 表 #oneBlock 和 第 23 一 29 行 的 样式 表 #twoBlock， 
其 重点 在 于 width 的 长 度 设 置 。oneBlock 是 一 个 宽 130px、 高 300px 且 居 左 为 0 的 框 模型 。twoBlock 
是 一 个 宽 135px、 高 500px 且 居 右 为 0 的 框 模型 。 所 以 之 后 #content 定义 的 margin 距离 页 面 左右 的 距离 
分 别 为 200px 和 180px。 这 个 数值 没有 绝对 的 精确 度 ， 只 要 保证 不 要 和 左右 两 个 块 级 区 域 重 合 即 可 。 
其 中 padding 属性 用 来 控制 文本 在 框 模型 中 的 位 置 , 默认 情况 下 是 以 左边 为 标准 ,所 以 在 #twoBlock 
对 象 中 ， 不 得 不 使 用 细 化 的 padding 属性 ， 以 便于 控制 文本 的 位 置 。 


说 明 : 在 样式 表 中 ，position 属 性 用 来 定位 框 模型 的 位 置 ， 这 是 一 种 绝对 定位 的 用 法 ,具体 的 使 用 将 在 
第 11 章 中 详细 介绍 。 


10.7 小 结 


本 章 介绍 了 CSS+DIV 布局 的 入 门 知 识 及 一 些 基 本 的 概念 型 知识 ， 但 是 这 些 基 本 的 知识 都 很 重要 。 
只 有 了 解 了 这 些 知识 点 后 ， 在 今后 Web 设计 的 学 习 中 ， 即 使 是 自学 ， 也 可 以 很 好 地 融会 贯通 新 知识 ， 
本 章 主要 内 容 有 : 

使 用 CSS 样式 表 来 布局 页 面 ， 使 页 面 分 割 成 块 级 结构 。 

理解 层 的 意义 ， 它 可 以 用 来 封装 CSS 样式 表 ， 以 及 层 的 特性 和 使 用 方式 。 

层 的 布局 格式 典型 ， 如 框 模型 ， 了 解 空 距 、 边 框 、 边 距 的 含义 和 特性 。 

了 解 CSS Hack， 使 用 它 来 解决 浏览 器 的 兼容 性 。 

使 用 display 属性 设置 块 级 对 象 和 行内 对 象 。 

在 第 11 章 中 ， 将 进一步 讨论 页 面 布局 ， 以 及 如 何 令 模 块 实现 在 页 面 中 的 定位 问题 。 


10.8 本 章 习 题 


习题 10-1 在 网 页 内 容 中 使 用 <div> 标 签 添加 样式 ， 使 网 页 文字 变 得 更 加 美观 ， 效 果 如 图 10.16 
所 示 。 
【分 析 】 本 题 考 查 读者 对 插入 <div> 标 签 以 及 <div> 在 内 容 中 使 用 的 掌握 程度 。 这 里 使 用 id 选择 器 
进行 样式 定义 。 
【关键 代码 】 
<style type="text/css"> 
#wz{ 
font-family: "黑体 ": 
font-size: 16px; 
color: 诈 FF; 


background-color:#390; 
text-align:center; 


全 
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</style> 
<div id="wz"> 这 是 使 用 &lt;div&gt; 标 签 的 效果 </div> 


习题 10-2 ”在 页 面 中 创建 一 个 层 ， 并 设置 层 距离 窗口 左边 位 置 为 7em， 距 离 上 边 为 7em， 效 果 如 
图 10.17 所 示 。 
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图 10.16 使 用 <div> 标 签 图 10.17 设置 层 定位 
【分 析 】 本 题 主要 考查 读者 对 层 定位 的 掌握 程度 。 
【关键 代码 】 
div{ 
left:7em; 
top:7em; 
习题 10-3 ”下面 给 出 一 段 代码 ， 请 说 出 本 段 代码 的 含义 。 
padding:2em 3em; 


【分 析 】 本 题 主要 考查 读者 对 空 距 的 掌握 程度 ， 该 段 代码 表示 框 模 型 空 距 顶 边 和 底 边 为 2em， 左 
边 和 右边 为 3em。 
习题 10-4 在 网 页 中 创建 一 个 层 ， 并 设置 层 的 空 距 为 10px， 边 框 为 7px、 蓝 色 ， 边 距 为 20px， 效 
果 如 图 10.18 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 框 模型 的 理解 。 
【关键 代码 】 
#d {background-color:#FFC; 
padding:10px; 
border:7px solid #0FF:; 
margin:20px; 
} 
习题 10-5 ”在 页 面 中 创建 3 个 颜色 分 别 为 红色 、 黄 色 和 蓝 色 的 层 ， 并 设置 红色 层 在 最 下 面 ， 蓝 色 
层 在 中 间 ， 黄 色 层 在 最 上 面 ， 效 果 如 图 10.19 所 示 。 
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图 10.18 设置 框 模型 大 小 


【分 析 】 本 题 主要 考查 读者 对 层 的 又 加 的 掌握 程度 。 


【关键 代码 】 


#c1{position:absolute; 
background-color:red; 
left:2em; 
top:2em; 

} 

#c2 {position:absolute; 
background-color:#0FF; 
left:3em; 
top:3em; 

} 

#c3 {position:absolute; 
background-color:yellow; 
left:4em; 
top:4em; 
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图 10.19 层 的 有 加 


第 11 章 进一步 讨论 页 面 布局 的 方法 


在 了 解 了 基本 的 层 和 框 模型 后 ， 接 下 来 便 可 以 进一步 讨论 能 做 出 怎样 效果 的 页 面 。 设 计 者 需要 将 
页 面 划分 为 不 同 的 区 域 ， 将 不 同 的 页 面 内 容 布局 在 不 同 的 位 置 。 页 面 的 分 布 和 内 容 所 处 的 位 置 ， 将 会 
给 浏览 者 传递 重要 的 网 站 讯息 。 本 章 的 主要 知识 点 如 下 。 

了 解 框 模型 的 定位 以 及 使 用 它们 来 布局 页 面 。 

浮动 层 的 使 用 。 

CSS 3.0 的 一 些 奇特 技术 以 及 未 来 发 展 趋势 。 

YAHOO 的 YUI Grid Css。 


11.1 页 面 中 的 定位 


当 能 够 娴熟 地 将 层 布 局 在 页 面 中 时 ，Web 设计 一 定 会 带 给 用 户 无 限 的 乐趣 。 在 第 10 章 中 定义 杠 模 
型 时 , 已 经 讲解 了 position 属性 。 基 于 这 个 属性 的 运用 , 可 以 将 页 面 内 容 定位 分 成 静态 定位 、 绝 对 定位 、 
相对 定位 、 固 定 定 位 和 浮动 这 5 种 方式 。 


11.1.1 静态 定位 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 静 态 定位 .wmv 

position 默认 情况 下 定义 的 便 是 static 属性 ， 此 时 的 框 模型 是 静态 定位 ， 和 其 他 文本 内 容 配合 。 代 
码 的 写法 是 : 

position:static; 

由 于 属于 默认 属性 ， 所 以 通常 都 在 代码 中 省 略 该 属性 。 实 例 11-1 中 即 为 静态 定位 的 页 面 形式 。 

【实例 11-1】 本 实例 设置 了 3 个 层 ， 并 为 层 设置 了 静态 定位 。 


re 实例 11-1: 设置 3 个 层 ， 并 为 层 设置 了 静态 定位 
源码 路 径 : 光盘 \ 源 文件 \11\11-1.html 


1 -<html> 

之 <head> 

3 <title> 页 面 内 容 的 定位 </title> 

4 <style> 

5 body {font-size:1.5em; /字体 大 小 

6 color:white; 

区 text-align:center; /定义 文本 居中 对 齐 
8 } 
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9 #block1 {background:navy; 

10 padding:1em; // 设 置 空 距 为 lem 

11 1 

12 #block2 {position:static; /默认 的 情况 中 可 以 省 略 

13 left:20px; // 定 义 层 距离 窗口 左边 20px 
14 top:20px; // 定 义 层 距离 窗口 顶部 20px 
15 background-color:orange; 

16 padding:1em; 

Eh } 

18 #block3 {background-color:green:; 

19 padding:1em; 

20 } 

4 | </style> 

22 </head> 

23 <body> 


24 ”<divid="block1"> 区 域 1</div> 
25 ”<divid="block2"> 区 域 2</div> 
26 ”<divid="block3"> 区 域 3</div> 
27 </body> 
28 -</html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 11.1 所 示 。 
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图 11.1 静态 定位 


注意 : 在 实例 中 ，static 属 性 的 定位 下 ， 代 码 第 13 行 和 第 14 行 不 起 作用 。 放 在 这 个 实例 中 ， 是 为 了 说 明 
后 面 不 同属 性 下 位 置 的 样式 。 


【深入 学 习 】 代 码 第 12 行 交代 了 这 个 实例 中 的 层 定 位 ， 是 和 系统 默认 情况 下 一 样 的 。 所以， 每 一 
块 区 域 都 自然 无 颖 地 结合 在 一 起 ， 从 上 至 下 ， 如 果 设 置 的 是 行内 对 象 ， 那么 区 域 按照 从 左 至 右 无 颖 拼接 。 


11.1.2 ”相对 位 置 
鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 相 对 位 置 .wmv 


如 果 将 实例 11-1 中 的 position 属性 改 成 relative， 其 作用 表示 相对 定位 ， 那 么 它 所 相对 的 参照 物 ， 
就 是 static 属性 下 的 位 置 , 也 就 是 默认 情况 下 的 位 置 。 当 设 定 不 同 的 数值 时 , 相对 于 初始 位 置 发 生 改变 ， 


而 初始 位 置 会 留 下 空白 占 位 。 这里, 可 以 通过 top、 right、 bottom 和 left 


@® 


属性 来 控制 位 移 。 如 将 实例 11-1 
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代码 中 的 第 12 行 和 第 13 行 属性 改写 成 : 

position:relative; // 采 用 相对 位 置 定位 

left:20px; 

那么 , 这 两 名 代码 表明 所 约束 的 对 象 ， 相 对 于 初始 位 置 向 右 偏离 20px 的 位 置 。 所 以 当 把 实例 11-1 
中 的 position 属性 改 成 relative， 其 效果 如 图 11.2 所 示 。 
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图 11.2 相对 定位 


注意 : 由 图 11.2 中 可 以 发 现 ， 区 域 2 偏离 了 原先 初始 位 置 居 左 20pX， 居 上 20px， 而 偏 移 之 后 的 初始 位 置 
依然 是 一 片 空白 。 


11.1.3 ”绝对 定位 


名 ml 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 绝 对 定位 .wmv 

绝对 定位 的 属性 是 absolute， 也 许 它 是 使 用 得 最 多 的 属性 之 一 。 较 之 于 相对 定位 的 relative， 它 的 
改变 在 于 当 对 象 发 生 位 移 时 ， 原 先 的 初始 位 置 如 同 被 挖 去 了 一 样 。 这 个 对 象 独立 于 其 他 的 页 面 内 容 ， 
而 初始 位 置 的 空白 会 被 其 他 内 容 自 然 填 补 。 

此 外 ， 绝 对 定位 的 对 象 并 不 是 相对 于 初始 位 置 发 生 位 移 。 事 实 上 ， 它 是 相对 于 上 一 级 的 对 象 的 初 
始 位 置 发 生 位 移 。 如 果 上 一 级 的 对 象 是 浏览 器 窗口 ， 那 么 它 就 是 相对 于 整个 页 面 来 发 生 位移 。 同 样 ， 
绝对 定位 也 可 以 使 用 top、right、bottom 和 left 属性 来 控制 位 移 。 

如 果 将 实例 11-1 中 代码 的 第 12 行 和 第 13 行 中 position 属性 和 居 左 距离 修改 为 : 

position:absolute; 

left:20px; 

那么 结果 将 如 图 11.3 所 示 ， 区 域 2 独立 于 其 他 页 面 内 容 ， 被 分 离 了 出 来 。 由 于 上 一 级 的 对 象 即 是 
页 面 本 身 ， 所 以 ， 它 所 发 生 的 位 移 是 相对 于 浏览 器 窗口 向 右 偏 移 20px， 向 下 偏 移 20px。 而 区 域 1 和 区 
域 3 结合 在 了 一 起 , 就 好 像 从 来 都 没有 过 区 域 2 一 样 。 那 么 , 什么 是 相对 于 上 一 级 的 对 象 发 生 位 移 呢 ? 
如 实例 11-1 所 示 ， 在 样式 表 的 定义 中 ， 添 加 一 个 新 的 定义 ， 插 入 的 代码 是 : 

span {position:relative; 

background-color:black; 
h 
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那么 ， 这 个 行内 标签 就 是 上 一 级 的 框 模型 ， 而 接着 将 代码 第 25 行 写 为 : 
<span> 这 里 上 一 级 的 “ 框 ” 
<div id="block2"> 区 域 2 
</div> 
</span> 


所 以 ， 这 里 的 区 域 2 被 放置 在 了 <span> 标 签 内 ， 即 放 在 一 个 <span> 定 义 的 框 中 ， 它 是 block2 框 模 


型 的 上 一 级 。 效 果 如 图 11.4 所 示 。 
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11.3 绝对 定位 


图 11.4 相对 于 上 一 


级 “ 框 ” 的 绝对 定位 
上 的 位 移 ， 以 黑色 框 的 上 边 


如 图 11.4 所 示 ， 区 域 2 是 相对 于 它 的 上 一 级 框 ， 即 黑色 的 这 个 框 所 发 4 
向 下 偏 移 20px， 向 右 偏 移 10px。 


11.1.4 固定 定位 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 11 章 \ 固 定 定位 .wmv 


固定 定位 比较 类 似 于 绝对 定位 ， 当 页 面 长 度 超出 浏览 器 窗口 时 ， 此 时 会 出 现 滚动 条 。 区 别 就 在 于 
绝对 定位 下 的 页 面 对 象 的 框 ， 会 随 着 滚动 条 和 页 面 一 起 移动 ， 而 固定 定位 下 的 页 面 对 象 的 框 则 不 会 随 
之 滚动 。 同 样 ， 固 定 定位 也 可 以 使 用 top、right、bottom 和 left 属性 来 控制 位 移 。 


注意 : IE 7 之 前 版 本 的 IE 浏览 器 不 支持 固定 定位 的 框 。 


国 


定 定位 和 绝对 定位 的 性 质 是 一 样 的 ， 它 们 所 定义 的 框 的 位 置 是 独立 于 其 他 页 面 内 容 之 外 的 。 这 


样 ， 有 时 候 它们 难免 会 合 加 在 一 起 ， 这 种 情况 可 以 使 用 Z 轴 属 性 ， 即 层 的 琶 加 特性 来 改变 它们 的 顺序 


(参考 第 10 章 ) 。 


人 


11.2 浮 动 层 
鳃 dl 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 11 章 \ 浮 动 层 .Wmv 
浮动 层 可 以 将 所 定义 的 页 面 

方便 。 事实 上 ， 浮 动 层 中 可 以 应 


float:left; 


的 


任何 对 象 ， 浮 动 框 的 代码 写法 如 下 : 


内 容 放 置 在 页 面 的 左边 或 者 右边 ， 通 常 放 入 图 像 时 使 用 这 种 方法 会 很 


第 11 章 “进一步 讨论 贡 面 布局 而 坟 关 


也 可 以 定义 成 right 和 none， 如 实例 11-2 所 示 即 为 创建 浮动 层 的 方法 。 
【实例 11-2】 本 实例 讲解 创建 浮动 层 的 方法 。 


1 

2 <head> 

到 <title> 创 建 浮动 层 </title> 

4 <style type="text/css" > 

5 body ffont: 80%/1.5 黑体 ; // 定 义 页 面 文本 字体 
6 

A h3 {font:1.2em 幼 圆 ; 

8 } 

9 #box {width: 12em; // 定 义 这 个 框 模型 的 宽度 
10 float: left; // 定 义 在 左 侧 的 浮动 层 
11 color: white; // 设 置 文本 的 颜色 
412 background: #060; // 设 置 背 景 颜 色 

13 padding: 1em; // 设 置 空 大 小 

14 margin: 0; /设置 边 距 大 小 

15 } 

16 </style> 

公 </head> 

18 <body> 

19 <h3> 一 月 一 日 领导 者 必须 正直 </h3> 

20 <p> 组 织 的 精神 是 自 上 而 下 树立 起 来 的 

21 </p> 

22 <p id="box"> 摘 自 : 彼得 * 德 鲁 克 《 管 理 : 任务 、 责 任 与 务实 》 
23 </p> 


24 <p> 当 考察 管理 者 是 否 诚信 时 ， 人 们 必定 会 非常 重视 他 的 人 品 是 否 正 直 ， 这 一 点 必定 首先 
25 ”会 在 管理 者 的 人 事 任用 上 体现 出 来 ， 因 为 领导 者 正 是 通过 其 正直 的 人 品 ， 才 能 够 实现 其 领导 ， 
26 ”领导 者 也 正 是 通过 其 正直 的 人 品 ， 才 树立 了 别人 效仿 的 榜样 ， 在 人 品 这 一 点 上 ， 人 们 无 法 弄 虚 
27 “作假 ， 一 个 领导 者 的 同事 ， 尤 其 是 他 的 下 属 们 ， 只 要 和 领导 者 共事 几 周 ， 就 会 知道 他 是 否 正直 ， 
28 ”他 们 可 以 原谅 别人 的 无 能 ， 疏 忽 ， 缺 乏 安全 感 甚至 是 粗鲁 无 礼 ， 但 是 他 们 却 无 法 宽恕 别人 的 不 
29 ”正直 ， 他 们 也 无 法 宽恕 领导 者 选用 不 够 正直 的 人 。</p> 

30 <p> 这 一 点 对 企业 最 高 领导 层 的 重要 性 是 毋庸 置疑 的 ， 因 为 一 个 组 织 的 精神 是 自 上 而 下 树 
31 ” 立 起 来 的 。 如 果 一 个 组 织 富有 精神 ， 那 是 因为 它 的 最 高 领导 者 的 精神 崇高 ， 如 果 一 个 组 织 腐败 ， 
32 ”其 根源 在 它 的 最 高 领导 者 ， 正 所 谓 “ 上 梁 不 正 下 梁 焉 ”， 如 果 一 个 员工 的 人 品 不 能 成 为 其 下 属 
33 ”的 效仿 榜样 ， 最 高 领导 者 就 决 不 应 该 将 他 提拔 到 重要 的 工作 岗位 。 


34 </p> 
35 </body> 
36 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 11.5 所 示 。 
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浮动 层 定义 在 文本 的 左边 ， 而 文本 被 挤 压 在 右边 。 所 以 ， 浮 动 层 并 不 是 会 浮动 在 页 面 的 上 方 而 盖 
住 下 面 的 文本 。 相 反 ， 浮 动 层 更 像 是 可 以 随意 嵌入 页 面 的 一 个 技术 。 此 外 ， 如 果 不 需要 浮动 层 的 左右 
存在 页 面 内 容 ， 可 以 使 用 clear 属性 来 清除 页 面 的 其 他 内 容 。 在 代码 的 样式 表 定 义 中 ， 加 入 clear 属性 


的 声明 ， 代 码 如 下 : 


span {clear:left; 
} 


11.5 创建 浮动 层 


那么 ， 假 如 在 实例 11-2 第 26 行 的 位 置 引 用 上 面 的 声明 ， 如 下 所 示 : 


<span> 领 导 者 也 正 是 通过 其 正直 的 人 品 ， 才 树立 了 别人 效仿 的 榜样 ， 在 人 品 这 一 点 上 ， 人 们 无 法 弄虚作假 ， 一 个 
领导 者 的 同事 ， 尤 其 是 他 的 下 属 们 ， 只 要 和 领导 者 共事 几 周 ， 就 会 知道 他 是 否 正直 ， 他 们 可 以 原谅 别人 的 无 能 ， 
疏忽 ， 缺 乏 安全 感 甚至 是 粗鲁 无 礼 ， 但 是 他 们 却 无 法 宽恕 别人 的 不 正直 ， 他 们 也 无 法 宽恕 领导 者 选用 不 够 正直 的 


人 。</span> 


当 设 计 者 将 这 段 文 本 放 入 到 <span> 标 签 内 ， 那 么 ， 页 面 的 效果 如 图 11.6 所 示 。 
(OG 时 caUsernE40Deskto P ~ 0 | BG apg 


_ 又 作 (P。 师 蝇 E) 查看 (V) Wi 天 A 工具 (0) 帮助 0H) 


【深入 学 习 】 当 使 用 clear 属性 之 后 ， 这 之 后 的 页 面 内 容 将 不 会 和 浮动 层 处 于 同一 行 。clear 属性 
还 可 以 定义 为 right 和 both。 right 属性 为 在 右边 不 允许 浮动 元 素 。both 属性 定义 为 左右 两 侧 均 不 许 浮动 


元 素 。 


一 月 一 日 领导 者 必须 正直 
组 如 的 精神 是 所 上 而 下 树立 起 率 的 


考察 管 理 省 是 天 诚信 时 ， 人 们 必定 会 非常 重视 

凶 的 人口 是 否 正直 ， 这 一 应 双 定 首先 会 在 管理 者 
人 事 任用 上 体现 出 来 ， 因 为 领导 者 正 是 通过 其 
直 的 人 品 ， 才 能 部 实现 其 领导 . 

领导 者 也 正 是 通过 其 正直 的 人 品 ， 才 而 立 了 别人 效仿 的 楼 村 ， 在 人 品 这 一 点 

上 ， 人 们 无 法 弄虚作假 ， 一 个 领导 震 的 同事 ， 尤 其 是 他 的 下 属 们 ， 只 要 和 领导 

者 共事 几 周 ， 就 知 道 他 是 否 正直， 也 们 可 以 原谅 别人 的 无 能 ， 琉 包 ， 缺 乏 安 

全 感 甚至 是 租车 无 礼 ， 但 是 他 们 却 无 法 融 恕 别人 的 不 正直 ， 他 们 也 无 法 喜 束 领 

导 者 选用 不 够 正直 的 人 . 


这 一 点 对 企业 最 高 领导 尽 的 重要 性 是 媳 腐 一 疑 的 ， 因 为 一 个 组 织 的 琦 神 是 让 上 
而 下 峙 立 起 来 的 。 如 果 一 个 组 织 言 有 硝 神 ， 那 是 因为 它 的 是 高 领导 者 的 村 神 崇 
高 ， 和 如果 一 个 组 织 属 败 ， 其 根源 在 它 的 最 高 领导 者 ， 正 所 谓 “上 梁 不 正 下 梁 
垩 ”， 如 时 一 个 员工 的 人 品 不 能 成 为 其 下 属 的 效仿 关 样 ， 量 高 领导 者 就 决 不 应 
该 将 他 提拔 到 重要 的 工作 岗位 。 


图 11.6 clear 属性 的 应 用 


注意 : 对 比 图 11.5 和 图 11.6， 可 以 了 解 两 种 样式 的 不 同 之 处 。 


ll3 


在 现在 流行 的 CSS 样式 


CSS 3.0 也 慢 慢 地 向 我 们 走 近 ， 


192 


CSS 的 新 奇 技术 以 及 未 来 发 展 


设计 中 ， 包 括 本 书 中 所 讨论 的 大 部 分 内 容 都 是 基于 CSS 2.1。 而 现在 ， 
其 中 多 数 功 能 目前 还 未 能 被 广泛 支持 , 但 是 其 中 不 乏 一 些 已 


的 功能 。 


11.3.1 图像 蔡 换 技术 


第 11 章 进步 寺 认 页面 而 B53 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 图 像 痊 换 技术 .wmv 
图 像 替 换 技术 是 指使 用 图 像 蔡 换 页 面 中 文本 的 功能 ， 类 似 于 在 页 面 中 插入 图 像 ， 只 是 这 种 方法 更 
为 方便 ， 易 于 代码 管理 。 通 常 来 说 ， 设 计 者 习惯 使 用 有 意义 的 图 像 去 蔡 换 一 些 标题 、LOGO 和 某 些 特 


定 的 页 面 背景 。 


这 里 通过 一 个 综合 的 关于 图 像 的 实例 ， 结 合 如 何在 页 面 中 放 入 图 像 、 设 置 背景 图 像 ， 以 及 使 用 图 


像 蔡 换 技 术 ， 制 作 如 实例 11-3 中 展示 的 页 面 。 
【实例 11-3】 本 实例 介绍 使 用 CSS 控制 图 像 的 技巧 。 


re | 实例 11-3: 使 用 CSS 控制 图 像 的 技巧 


源码 路 径 : 光盘 \ 源 文件 \11\11-3.html 


<title>Sweet</title> 
<style type="text/css" > 
body {font: 90%/1.5 幼 圆 ; 
color: white; 
background: black url( 图 片 /dog.jpg) bottom right 
fixed repeat-x; // 设 置 背 景 图 像 


} 
div { width: 500px; // 设 置 层 的 宽度 
margin: auto; 
上 
h1{ width: 280px; 
height: 155px; 
background-image: url( 图 片 /logo.png); /文本 标题 的 背景 
text-indent: -9999em; // 将 标题 位 置 设 定 在 窗口 之 外 
margin: 0; 
上 
img{ /定义 图 像 的 大 小 和 边框 样式 
width: 500px; 
height: 150px; 
border: 1px solid white; // 设 置 边框 样式 


p {padding:1em; 
width: 500px; 
} 
</style> 
</head> 
<body> 
<div> 
<h1>Sweet Rain</h1> 
<p> 黑 衣服 、 黑 领带 、 白 手套 ， 跟 着 一 只 会 说 话 的 黑 狗 ， 这 是 “死神 ” 千 叶 的 标准 装束 。 


HIML+CSS 网 页 设计 详解 


SS 本 
35 <p> 当 死神 作出 不 同 于 以 往 的 判断 时 ， 超 脱 时 空 的 命运 之 轮 开 始 了 转动 ……</p> 
36 <img src=" 图 片 /dog.png" alt="sweet rain" /> ”<!- 放 入 图 像 替 换文 本 -> 

37 <p> 裁 断 生死 的 死神 因 一 念 之 差 放 了 一 名 女子 一 条 生路 ， 没 想到 就 此 引起 连锁 反应 ， 


41 </body> 
42 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 11.7 所 示 。 


logo. png 


图 11.7 使 用 CSS 控制 图 像 的 技巧 


【深入 学 习 】 在 这 个 实例 中 ,使 用 张 图 像 ， 分 别 是 logo.png、dog.png 和 dog.jpg， 页 面 背 景 图 
像 使 用 了 dog.jpg。 在 body 样式 表 中 ， ee 下 ， 设 置 背景 图 像 ，fixed 表示 将 背景 图 像 固定 
在 页 面 中 ， 不随 着 页 面 内 容 滚动 ，repeat-x 表示 在 横向 上 重复 ， 所 以 如 果 将 页 面 宽度 拉 长 ,会 出 现 背 景 
图 像 的 重复 现象 。 如 果 想 避免 这 种 情况 ， 可 以 通过 修改 图 像 本 身 来 实现 。 
说 明 : fixed 的 完整 写法 应 该 是 “background-attachment:fixed:” 


在 第 19 一 23 行 代 码 中 ， 设 置 的 img 样式 表 用 来 控制 插入 图 像 的 大 小 和 边框 的 属性 。 在 第 36 行 代 
中 ， 插 入 了 图 像 dog png。 
本 实例 中 关键 的 部 分 在 于 如 何 使 用 图 像 蔡 换 文本 。 可 以 看 到 ， 第 31 行 代码 中 ，<h1> 标 签 内 本 应 该 


于 


第 11 于 “进一步 讨论 贡 面 布局 发 An 


是 文本 Sweet Rain， 注 意 代 码 第 13 一 18 行 的 样式 表 ， 这 个 样式 表 hl 定义 的 框 模型 表明 插入 logo.png 
图 像 。 事 实 上 ， 在 最 终 的 效果 中 ， 确 实 是 一 张 图 像 ， 那 么 原来 的 文本 是 如 何 消失 的 呢 ? 其 实 ， 文 本 并 
没有 消失 ， 注 意 代码 “text-indent: -9999em: ”， 表 示 文 本 框 内 的 文本 缩 进 -9999em， 如 此 大 的 数值 的 作 
用 便 是 将 文本 推出 窗口 之 外 。 所 以 ， 最 终 的 效果 中 浏览 者 并 不 能 看 到 文本 。 


11.3.2 CSS 3.0 的 新 发 展 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 11 章 \CSS 3.0 的 新 发 展 .wmv 
2008 年 开始 ，W3C 组 织 起 草 新 的 CSS 3.0 标准 。 从 中 可 以 发 现 ， 在 新 的 标准 中 ， 大 幅 扩 展 了 
background 和 border 属性 的 功能 。 主 要 表现 在 对 于 背景 图 像 和 边框 的 精细 修改 ， 如 修改 边框 的 
border-radius， 它 能 使 直角 边框 改 成 圆 角 ， 其 效果 如 图 11.8 所 示 。 定 义 杠 模型 下 的 文本 阴影 效果 的 
box-shadow 属性 ， 如 图 11.9 所 示 。 
border-radius: 55px 25px 


span{border:thin solid; 
box-shadow:0.2em 0.2em #ccc; 


| 


He will be put on breadland Water 


图 11.8 CSS 3.0 中 的 border-radius 属性 图 11.9 CSS 3.0 中 的 box-shadow 属性 
说 明 : 资料 来 自 于 W3C 起 草 方案 中 的 两 个 示例 ， 如 读者 有 兴趣 了 解 更 多 ， 可 参考 http://www.W3.org/TR/ 
css3-background/, 
技术 总 是 不 断 进步 ， 不 断 发 展 ， 但 是 所 有 的 技术 关键 核心 问题 都 是 基于 对 原理 的 理解 。 这 样 ， 在 
面 对 所 有 的 扩展 的 知识 上 ， 都 能 够 做 到 游 刀 有余 ， 快 速 上 手 。 


11.3.3 ”实现 圆 角 框 模型 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 实 现 贺 角 框 模型 ,wmv 
目前 IE 10 和 其 他 浏览 器 的 最 新 版 本 已 经 能 有 效 地 支持 border-radius 属性 。 如 实例 11-4 中 的 页 面 
是 在 IE 10 浏览 器 中 border-radius 属性 的 使 用 情况 。 
【实例 11-4】 本 实例 将 直角 边框 修改 成 圆 角 边框 。 


re 实例 11-4: 将 直角 边框 修改 成 贺 角 边框 
源码 路 径 : 光盘 \ 源 文件 \11\11-4.html 


1 <html> 

局 <head> 

3 <title>IE 浏览 器 下 的 圆 角 边 框 </title> 

4 <style type="text/css"> 

5 div { background-color:maroon; 

6 border-radius: 55px 15px; /修改 边框 的 圆 角 
区 border 4px solid black; // 设 定 边 框 的 样式 
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8 colorwhite; 
9 padding: 30px; // 设 置 页 面 的 空 距 
10 } 
| </style> 
12 </head> 
13 <body> 
14 <div> 在 驾车 穿越 法 国 乡间 时 ， 塞 斯 * 高 汀 看 到 一 群 又 一 群 好像 从 童话 书 里 出 来 
15 ”奶牛 。 但是，.…… 
16 </div> 
17 </body> 
18 </html> 
运行 程序 】 浏 览 该 页 面 ， 最 终 页 面 效果 如 图 11.10 所 示 。 


[= 2 
2 Soe RsHTMIL+CSS+ 品 ~ ee 
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11.10 Firefox 情况 下 的 圆 角 边框 
注意 : 由 图 11.10 可 以 看 出 圆 角 边框 看 起 来 比 直角 边框 更 漂亮 。 


11.4 案例 : 有 效 地 管理 页 面 布 局 


鳃 m 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 11 章 \ 案 例 : 有 效 地 管理 页 面 布局 .wmv 

本 节 将 介绍 YAHOO 公司 的 一 种 YUI Grids CSS 推广 的 布局 思路 。 这 是 一 种 很 好 的 布局 页 面 的 思 
路 ， 通 过 这 些 可 以 学 习 到 布局 经 验 ， 先 解决 什么 问题 ， 再 解决 什么 问题 。 

(1) 设 定 页 面 的 宽度 ， 设 计 者 可 以 自由 确定 页 面 的 宽度 。 通 过 使 用 width 属性 来 固定 准确 的 页 面 
值 , 或 者 通过 百分比 来 确定 页 面 。 如 果 使 用 数值 ， 通 常设 置 在 900px 左右 ,尽量 不 要 低 于 700px， 那 样 
页 面 的 主体 就 显得 过 于 窗 小 了 。 如 果 是 通过 百分比 显示 ， 则 设置 为 100%， 代 码 如 下 : 


<style> 
#doc {width:750px; 


时 

#doc 2{width:950px; 
} 

#doc 3{width:100% 
并 

#doc4 {width=974px; 


</style> 


他 
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<div id="doc"> J#doc 是 750px 宽 的 页 面 
</div> 

<div id="doc2"> /J#doc2 是 950px 宽 的 页 面 
</div> 

<div id="doc3"> /#doc3 是 100% 填 满 窗口 的 页 面 
</div> 

<div id="doc4"> Ji#doc4 是 974px 宽 的 页 面 
</div> 


如 果 考虑 到 在 不 同 的 浏览 器 中 的 显示 结果 , 那么 ,最 好 的 办 法 是 使 用 以 em 为 单位 设置 的 页 面 宽度 。 
由 于 不 同 的 浏览 者 也 许 会 设置 不 同 的 字体 大 小 ， 这 样 做 的 好 处 是 主动 去 适应 浏览 者 。 举 一 个 简单 的 例 
子 ， 样 式 表 如 果 写 为 : 

#custom-doc { margin: auto; 


width:46.15em; // 在 非 IE 浏览 器 中 的 宽度 
*width:45.00em; /在 IE 浏览 器 中 的 宽度 
min-width:600px:; // 可 以 省 略 推荐 使 用 


} 


在 非 正 浏览 器 中 如 果 设 置 页 面 宽度 为 46.15em， 那 么 这 个 长 度 相当 于 在 正 中 设置 页 面 宽度 为 
45em。 所 以 ， 这 是 一 种 CSS Hack 的 用 法 ， 为 了 避免 在 不 同 的 浏览 器 中 所 见 的 页 面 长 度 大 小 不 一 。 此 
外 ，margin=auto 可 以 避免 页 面 内 容 始 终 贴 着 浏览 器 的 左 侧 。 

(2) 接着 将 页 面 的 布局 分 为 3 个 部 分 。 一 个 作为 页 面 的 头 部 ， 一 个 作为 页 面 的 主体 ， 一 个 作为 页 
面 的 底部 。 相 对 于 这 3 个 部 分 设计 CSS 样式 表 ， 分 别 命名 样式 表 为 header、footer 和 body， 代 码 如 下 : 
<div id="doc"> 
<div id="hd"> l/header 
</div> 
<div id="bd"> llbody 
</div> 
<div id="ft"> llfooter 
</div> 
</div> 


(3) 在 页 面 的 主体 中 ， 可 以 进一步 细 分 主体 页 面 的 布局 。 把 body 部 分 分 成 两 个 部 分 ， 分 别 为 
main-block 和 second-block。 原 理 上 ， 设 置 好 second-block 的 长 度 ，main-block 将 使 用 second-block 剩 
余 的 宽度 ， 代 码 如 下 : 


<div id="bd"> 


<div id="yui-main"> llyui-main 对 页 面 不 起 任何 作用 
… <div class="yui-b">first</div> // 页 面 的 first 部 分 

</div> 

<div class="yui-b">second</div> // 页 面 的 second 部 分 


"</div> 


注意 : 在 这 里 ,yui-main 样 式 表 不 具备 实际 意义 , 它 是 一 个 未 定义 的 样式 表 ， 就 是 说 它 并 不 能 影响 设计 
者 的 页 面 效 果 。 但 是 , YUI 这 么 做 的 意义 在 于 , 可 令 second 内 容 比 first 内 容 更 容易 被 搜索 引擎 优化 。 


-加 
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(4) 设计 者 在 这 样 的 基础 上 ， 可 以 考虑 作出 进一步 的 细 分 布局 。 将 main 部 分 的 布局 继续 一 分 为 
二 ， 那 么 使 用 这 种 技术 很 容易 做 到 内 容 的 嵌 套 。 定 义 一 个 yui-g 的 样式 表 嵌 套 在 yui-b 中 ， 然 后 把 这 部 
分 内 容 一 拆 二 ， 将 其 中 一 部 分 定义 为 yuiru， 所 以 ， 此 时 代码 变 成 : 


<div id="yui-main"> 
<div class="yui-b"> 
<div class="yui-g"> 
<div class="yui-u first"></div> 
<div class="yui-u"></div> 
</div> 
</div> 
</div> 


注意 : 在 class=yui-u first 这 个 定义 中 , 使 用 了 伪 类 first-child, 但 并 不 是 所 有 浏览 器 都 支持 这 个 属性 。 这 
里 的 作用 是 给 yui-u 添 加 额外 的 属性 来 区 分 两 个 yui-u 的 性 质 ， 而 带 来 的 好 处 是 可 以 使 用 浮动 层 来 
划分 两 边 。 

最 后 ， 设 计 者 可 以 使 用 这 种 方法 不 停 地 嵌 套 下 去 ， 但 是 要 注意 ， 如 果 嵌 套 的 子 布局 就 是 其 布局 的 

本 身 ， 它 不 需要 放 在 一 个 嵌 套 中 ， 如 以 上 代码 中 的 class=yui-g。 而 一 旦 划分 出 来 的 两 个 部 分 ， 一 定 要 

区 分 标注 其 中 的 一 个 为 frst， 如 以 上 代码 再 拆 分 一 次 ， 则 代码 为 : 


<div id="yui-main"> 
<div class="yui-b"> 
<div class="yui-g"> 
<div class="yui-g first"> 
<div class="yui-u first"></div> 
<div class="yui-u"></div> 
</div> 
<div class="yui-g"> 
<div class="yui-u first"></div> 
<div class="yui-u"></div> 
</div> 
</div> 
</div> 
</div> 


这 一 次 将 yui-g 分 为 两 部 分 来 操作 ， 如 此 反复 ， 可 以 一 直 循环 下 去 ，YAHOO 公司 基于 这 种 原理 ， 开 
发 出 一 种 便捷 的 CSS 样式 表 布 局 的 页 面 生 成 工具 YUI CSS Grid Builder， 有 兴趣 的 读者 可 以 尝试 使 用 。 


说 明 : YUI: CSS Grid Builder 的 网 址 是 http://developer.yahoo.com/yui/grids/builder/。 
【实例 11-5】 本 实例 使 用 YUI Grids CSS 方法 进行 一 个 简单 的 页 面 布 局 。 


re 实例 11-5: 使 用 YUI Grids CSS 方法 进行 简单 的 页 面 布局 
源码 路 径 : 光盘 \ 源 文件 \11\11-5.html 


一 oo、oDwmFwN 一 
[=] 
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<!IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html > 
<head> 
<title> 管 理 页 面 布局 </title> 
<style type=text/css> 
html{color:maroon; 
background:white; 
} 
body {font:13px/1.23 幼 圆 ; 
*font-size:small; /设置 字体 为 小 号 
text-align:center; 
b 
#doc{margin:auto; // 使 页 面 能 够 居中 显示 
text-align:left; 
width:57.69em; // 非 IE 浏览 器 下 的 页 面 宽度 
*width:56.25emi; UIE 浏览 器 下 的 页 面 宽度 
min-width:750px;. 
bh 
.bbbt{float:right; 
color:black; 
} 
div.first{ float:left; 
width:74.2%; // 页 面 主体 位 置 的 74.2% 
background:silver; 
font:1em 幼 圆 ; 
color:black; 
padding:10px; 


》 
#bd {zoom:1; /不 放大 对 象 的 大 小 和 比例 


} 
#ft {background:teal; /#ft 是 页 面 的 底部 层 
font:1em 幼 圆 ; 
color:orange; 
padding:2px; 
有 
</style> 
</head> 
<body> 
<div id="doc"> 
<div id="hd"> 
<p> 他 不 像 精神 病 或 一 般 小 说 上 所 记载 的 其 他 多 重 人 格 病 患 一 样 使 用 杜撰 的 假 
名 ， 


</p> 
</div> 
<div id="bd"> 
<div class="main"> <!-- 不 具备 实际 意义 的 #main--> 
<div class="bbb first"> 
<p> 初 次 见 到 这 位 廿 三 岁 的 年 轻 人 ， 是 在 俄亥俄 州 雅典 市 的 雅典 心理 
健康 
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52 中心， 

53 </p> 

54 </div> 

55 <div class="bbb"> 

56 <p> 几 天 之 后 ，《 新 闻 周刊 》 一 篇 名 为 《 比 利 的 十 个 面孔 》 文 章 最 


58 </p> 

59 </div> 

60 </div> 

61 </div> 

62 <div id="ft"> 

63 <p> 然 后 有 一 天 ， 令 人 惊异 的 事情 发 生 了 。 威 廉 * 密 里 根 第 一 次 完全 融合 


65 </p> 

66 </div> 
67 </div> 

68 </body> 
69 </html> 


【运行 程序 】 浏 览 该 页 面 ， 最 终 的 效果 如 图 11.11 所 示 。 
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图 11.11 管理 页 面 布局 
注意 : 代码 的 第 30 和 31 行 中 ，zoom 属 性 是 用 来 触发 layout 属 性 的 ，layout 是 一 个 IE/Window 的 私有 概 
念 ， 它 决定 了 一 个 元 素 如 何 显示 以 及 约束 其 包含 的 内 容 ， 如 何 与 其 他 元 素 交互 和 建立 联系 ， 如 
何 响应 和 传递 应 用 程序 事件 /用 户 事件 等 。zoom:1 表 示 不 放大 对 象 的 大 小 和 比例 。 
此 外 ， 在 布局 页 面 时 ， 要 养 成 一 个 良好 的 定义 样式 表 命 名 的 习惯 ， 如 表 11.1 所 示 ， 仅 供 参考 。 
表 11.1 样式 表 命 名 


样 式 名 称 
容器 container 


@ 
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页 头 header 

内 容 content 

页 面 主 main 

续 表 

样 式 名 称 

页 尾 footer 

左右 中 left right center 

导航 navigaiton 

栏目 column 

侧 栏 sidebar 

页 面 外 围 控制 整体 布局 宽度 wrapper 

主导 航 mainbav 

子 导 航 subnav 

左 导航 leftsidebar 

项 导航 topnav 

右 导 航 rightsidebar 

底 导 航 bottomnav， 

标题 title 

摘要 summa 

菜单 menu 

子 菜单 submenu 

边 导航 sidebar 

标志 logo 

登录 login 

登录 条 loginbar 

注册 regsiter 

加 入 joinus, 

功能 区 Shop 

搜索 search 

状态 status 

按钮 button 

标签 页 tab 

文章 列表 list 

提示 信息 msg 

小 技巧 tips 

投票 vote 

指南 guild 

广告 banner 

热点 hot 

注释 note 

图 标 icon 

合作 伙伴 partner 
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ss Rat 


友情 链接 flink 

版 权 copyright 

下 载 download 
11.5 小 结 


在 第 10 章 的 基础 上 ， 本 章 介绍 了 如 何 职业 化 地 管理 好 页 面 布 局 ，CSS+DIV 是 一 种 流行 布局 方式 ， 
不 仅 是 一 项 流行 的 技术 ， 更 是 一 门 值得 深究 的 学 问 。 在 了 解 的 基础 上 ， 才 能 够 熟 能 生 巧 。 当 能 够 自由 
地 在 窗口 中 布局 页 面 时 ， 则 会 产生 极 大 的 成 就 感 和 乐趣 。 本 章 主要 内 容 有 : 

框 模 型 的 定位 ， 有 静态 定位 、 相 对 定位 、 绝 对 定位 和 固定 定位 。 

浮动 层 的 使 用 以 及 clear 属性 。 

在 页 面 中 使 用 图 像 ， 以 及 图 像 蔡 换 技 术 。 

CSS 3.0 的 未 来 发 展 中 的 奇特 技术 ， 如 圆 角 、 阴 影 。 

YUI Grid CSS 的 重复 嵌 套 的 布局 方法 。 

在 接 下 来 的 章节 中 ， 将 开始 接触 页 面 中 的 脚本 程序 ， 如 果 说 目前 的 网 站 前 端 开发 主力 技术 还 是 
CSS+DIV， 那 么 今后 的 页 面 开发 是 属于 CSS+DIV+JavaScript 的 。 


11.6 本 章 习题 


习题 11-1 在 网 页 中 创建 两 个 浮动 框 ， 并 插入 两 幅 画 ， 设 置 一 个 向 左边 浮动 ， 另 一 个 向 右边 浮动 ， 
效果 如 图 11.12 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 浮动 层 float 的 掌握 程度 。 
【关键 代码 】 
k1{ 
background-image:url( 图 片 /get.jpg); 
float:right; 
} 
k2{ 
background-image:url( 图 片 /get1.jpg); 
float:left; 
} 


习题 11-2 在 网 页 中 定义 div 层 ， 使 用 绝对 定位 ， 使 其 达到 如 图 11.13 所 示 的 效果 。 
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| 100% ， 
图 11.12 创建 浮动 框 图 11.13 绝对 定位 
【分 析 】 本 题 主 要 考查 读者 对 绝对 定位 的 掌握 程度 。 这 里 定义 了 两 个 层 ， 并 对 第 二 个 层 进行 了 绝 
对 定位 。 
【关键 代码 】 
#b2 {position:absolute; 
left:30px; 
top:40px; 
} 
习题 11-3 在 网 页 中 插入 3 个 元 素 ， 定 义 其 中 一 个 元 素 的 属性 为 相对 定位 ， 效 果 如 图 11.14 
所 示 。 


【分 析 】 本 题 考查 了 相对 定位 于 相 邻 对 象 的 关系 。 这 里 定义 了 3 个 元 素 ， 其 中 第 二 个 是 相对 定位 
的 参考 元 素 ， 通 过 元 素 间 的 位 置 关 系 ， 从 而 看 出 相对 定位 对 相 邻 元 素 的 影响 。 
【关键 代码 】 


.ys2{ 
position:relative; 
top:60px; 
left:80px; 
background-color: #3FF; 
border:1px solid #360; 
} 
习题 11-4 ”在 网 页 中 添加 一 段 文本 ， 并 设置 文本 边框 为 圆 角 边框 ， 效 果 如 图 11.15 所 示 。 
l= 
| 加 meHrMLCSSrED ~ 0 | © ana 
文件 |” 委 纺 (E) 至 肆 (V) ”收藏 夫 (A) 工具/T) 大 上 h(H) 
© 
DO eM cs P ，C | mssTanioE > ee 
文件 有 ”元 洁 可 大 (V) 攻 帝 夫 从 工具) 者 动 (H) 
"i 
下 态 100% ~ 护 100% ~ 


图 11.14 相对 定位 图 11.15 设置 圆 角 边框 


【分 析 】 本 题 主要 考查 读者 对 圆 角 边框 的 掌握 程度 。 
【关键 代码 】 
div {background-color:#0FF:; 
border-radius:40px 55px; 
border 4px dotted black; 
color:-#600; 
padding: 30px; 
} 


习题 11-5 ”在 网 页 中 定义 两 个 div 层 ， 并 对 这 两 个 层 都 是 用 绝对 定位 ， 效 果 如 图 11.16 所 示 。 


i ep [= li 
[DE erm csp ©| Escs x BD 


文件 F。 关 弗 |E) 二 看 (V】 家 涛 夫 (A) 工具 站 大 二 (HI 
Ss 
图 11.16 设置 绝对 定位 
【分 析 】 本 题 主 要 考查 读者 对 div 绝对 定位 的 掌握 程度 。 这 里 定义 了 两 个 绝对 定位 的 元 素 ， 通 过 
元 素 与 其 父 级 元 素 位 置 的 对 比 ， 从 而 看 出 当 父 元 素 中 使 用 了 绝对 定位 属性 值 的 时 候 ， 子 元 素 的 位 置 会 
按照 父 元 素 的 位 置 显示 ， 同 时 子 元 素 可 能 会 覆盖 父 元 素 。 
【关键 代码 】 
-人 


position:absolute; 
width:400px; 
height:100px; 
} 

ZZ{ 
position:absolute; 
width:300px; 
height:50px; 
} 
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看 着 设计 好 的 页 面 ， 总 觉得 缺少 一 点 什么 。 对 了 ， 就 是 缺少 “灵动 ”的 
感觉 。 让 网 页 充满 动感 ， 我 们 就 需要 考虑 网 页 中 的 另外 一 个 重要 技术 一 一 
JavaScript。 本 篇 将 详细 讲解 JavaScript 在 网 页 中 如 何 使 用 。 

第 12 章 神奇 的 表单 

第 13 章 在 网 页 中 加 入 神奇 的 效果 

第 14 章 “ JavaScript 入 门 


第 15 章 了 解 制作 页 面 的 工具 


第 12 章 ”神奇 的 表单 


名 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \ 神 奇 的 表单 -wmv 

之 前 的 所 有 网 页 中 ， 浏 览 者 只 能 看 到 或 者 使 用 超 链接 去 浏览 另外 一 个 页 面 和 页 面 内 的 锚 点 ， 但 是 
这 些 都 不 能 算是 动态 页 面 。 现 在 ， 大 多 数 网 站 都 具备 收集 用 户 信息 的 功能 ， 如 发 表 留 言 、 输 入 账号 等 ， 
而 通过 使 用 表单 能 够 令 浏览 者 和 页 面 互动 起 来 。 本 章 的 主要 知识 点 如 下 。 

表单 是 如 何 工 作 的 。 

如 何 创建 表单 。 

不 同 功能 多 种 样式 的 表单 。 

表单 域 能 够 做 些 什么 。 

在 了 解 表单 之 前 , 先 来 简单 了 解 一 下 什么 是 JavaScript 程 序 。 首 先 要 分 清 两 个 概念 :什么 是 JavaScript 
的 程序 部 分 ， 该 如 何 去 触 发 JavaScript 程序 。 通 过 一 个 简单 的 例子 来 了 解 一 下 ， 如 实例 12-1 所 示 。 在 
这 个 实例 中 ， 可 以 了 解 JavaScript 程序 和 表单 之 间 的 工作 关系 ， 看 看 它们 是 如 何 合作 的 。 


re 实例 12-1: 通过 JavaScript 程序 计算 矩形 的 面积 
源码 路 径 : 光盘 \ 源 文件 \12\12-1.html 


1 <html> 

之 <head> 

3 <title> 计 算 和 矩形 的 面积 <jtitle> 

4 <style type=text/css> 

5. .result { font-weight: bold; 

6 } 

区 </style> 

8 <script language="JavaScript"> 

9 r 

10 * 这 是 一 个 计算 矩形 面积 和 体积 的 JavaScript 

vl * 定义 了 一 个 函数 作为 事件 

12 a 

43 function calculate() { 

14 上 获取 用 户 输入 的 数据 */ 

15 var length = document.loandata.length.value; 
16 var width = document.loandata.width.value; 
17 var height = document.loandata.height.value; 
18 上 * 获取 <span> 标 签 的 对 象 "/ 

19 var area = document.getElementByld("area"); 
20 六 输出 计算 的 结果 

21 area.innerHTML = length * width; 

芝 芝 volume.innerHTML = length * width * height; 


23 } 
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24 </script> 

25 </head> 

26 <body> 

27 <form name="loandata"> 

28 <table> 

29 <tr><td><b> 输 入 长 宽 高 的 数值 : </b></td></tr> 
30 <tr> 

31 <td>1) 矩形 的 长 度 是 :</td> 

32 <td><input type="text" name="length"></td> 

33 </tr> 

34 <tr> 

35 <td>2) 矩形 的 宽度 是 :</td> 

36 <td><input type="text" name="width"></td> 

37 </tr> 

38 <tr> 

39 <td>3) 矩形 的 高 度 是 :</td> 

40 <td><input type="text" name="height"></td> 

41 </tr> 

42 <tr><td></td> 

43 <td><input type="button" value=" 运 行 " onclick="calculate();"></td> 
44 </tr> 

45 <tr><td><b> 和 矩形 的 面积 和 体积 分 别 是 : </b></td></tr> 
46 <tr> 

47 <td> 矩形 的 面积 : </td> 

48 <td><span class="result" id="area"></span></td> 
49 </tr> 

50 <tr> 

54 <td> 矩形 的 体积 : </td> 

S52 <td><span class="result" id="volume"></span></td> 
53 </tr> 

54 </table> 

55 </form> 

56 </body> 

57 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.1 所 示 。 


| 
-| Remsen - ©| EmmaR 
文件 月。 归 吉 E)】 宇 二 V| 届 二 类 (A 工具 Tm 苍 妈 0) 

输入 长 高 高 的 数值 。 
1) 矩形 的 长 度 是 ; 
2) 矩形 的 帘 度 是 
3 引 拒 形 的 高 度 是 : 


矩形 的 面积 和 体积 分 别 是 ， 
矩形 的 面积 42 
和 矩形 的 体积 ， 210 


丰 100% ~ 省 
图 12.1 计算 矩形 的 面积 


【深入 学 习 】 代 码 的 第 8 一 24 行 是 一 个 JavaScript 的 小 程序 , 其 作用 是 计算 一 个 和 矩形 的 面积 和 体积 。 
那么 ， 对 于 页 面 浏 览 者 来 说 ， 如 何 才能 使 用 这 个 计算 矩形 的 小 程序 呢 ? 这 里 就 要 通过 表单 将 小 程序 触 
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发 ， 并 且 通 过 表单 使 这 个 程序 可 以 和 用 户 交 互 。 

从 图 12.1 中 的 浏览 结果 来 看 ， 其 中 可 以 让 用 户 输入 数据 的 功能 便 是 通过 表单 实现 的 。 这 部 分 代码 
是 第 32、36、40、43、48 和 52 行 这 6 行 。 所 以 ， 当 用 户 输入 长 度数 值 为 21、 宽 度数 值 为 2、 高 度数 
值 为 5 这 样 的 数值 时 ， 都 是 表单 在 起 作用 ， 而 页 面 中 的 小 程序 只 负责 计算 出 矩形 的 面积 和 体积 。 


注意 : 在 本 章 中 ， 重 点 讨论 如 何 使 用 表单 来 触发 JavaScript 的 程序 ， 如 何 配合 设计 者 来 表现 页 面 中 的 表 
单 ， 而 什么 是 JavaScript 程 序 将 在 后 面 的 章节 中 介绍 。 


12.1 表单 的 工作 原理 


表单 最 重要 的 作用 就 是 在 客户 端 接收 用 户 的 信息 ,然后 将 数据 递交 给 后 台 的 程序 来 操控 这 些 数据 。 
从 技术 的 概念 上 ， 表 单 用 于 操作 form 对 象 ， 对 象 是 一 种 基本 的 数据 类 型 。 


12.1.1 <script> 标 签 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \<serip 人 > 标签 .wmv 

JavaScript 程序 的 调用 类 似 于 CSS 样式 表 , 可 以 像 嵌 入 式样 式 表 一 样 放 入 <head> 标 签 中 , 也 可 以 像 
外 联 式样 式 表 一 样 通过 链接 来 引用 。 当 放 入 <head> 标 签 中 使 用 时 ， 需 要 通过 <scripf 标 签 命令 行 ， 如 实 
例 12-1 中 第 8 行 和 第 24 行 。 浏 览 器 通过 <script> 标 签 获得 分 析 程序 的 信息 ， 来 告诉 浏览 器 使 用 的 是 哪 
种 语言 的 脚本 ， 如 实例 12-1 中 第 8 行 : 

<script language="JavaScript"> 


上 面 代码 是 告诉 浏览 器 ， 这 是 JavaScript 脚本 。 
如 果 是 通过 引用 外 部 JavaScript 程序 ， 就 像 链 接 外 联 样式 表 那 样 ， 那 么 代码 应 该 写成 : 
<script type="text/javascript" src="some.js"> 
</scirpt> 
说 明 : JavaScript 程 序 的 后 缓 名 是 .js。JavaScript 的 程序 设计 参考 第 13、14 章 。 


12.1.2 创建 表单 


锯 H 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \ 创 建 表单 -wmv 

创建 一 个 表单 看 上 去 就 像 创 建 一 个 表格 ， 表 格 的 单元 格 、 行 、 列 都 放 在 <table> 标 签 中， 而 创建 表 
单 的 方式 就 像 是 创建 一 个 表格 ， 使 用 <form> 标 签 来 创建 。 其 中 放置 表单 的 对 象 ， 有 表单 域 、 按 钮 和 其 
他 元 素 。 

<form> 标 签 中 可 扩展 几 个 属性 ， 分 别 是 action、method、enctype 和 target 属性 。action 属性 表示 将 
数据 传送 到 指点 的 URL 地 址 ，method 属性 的 值 告诉 浏览 器 通过 怎样 的 方式 来 提交 数据 。 还 有 enctype 
和 target 属性 ， 前 者 用 来 表示 编码 方式 ， 后 者 用 来 表示 目标 的 显示 方式 。 


@ 
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1. action 属性 


通过 <form> 标 签 定义 的 表单 ， 里 面 必须 有 action 属性 才能 将 表单 中 的 数据 提交 出 去 。 如 下 面 的 代 
码 所 示 : 


<form action="some.php"> 
</form> 


其 作用 是 用 来 提交 some.php 这 个 页 面 中 的 数据 。 
2. method 属性 


method 属性 的 作用 是 告诉 浏览 器 ， 数 据 是 以 何 种 方式 提交 出 去 。method 属性 下 可 以 有 两 个 选择 : 
post 和 get。 默 认 情 况 下 ， 数 据 被 提交 的 方式 是 get， 表 单 域 中 输入 的 内 容 会 添加 在 action 指定 的 URL 
中 。 当 表单 被 提交 之 后 ， 用 户 便 获得 一 个 明确 的 URL。 由 于 这 种 方式 下 数据 会 添加 到 URL 中 ， 所 以 ， 
这 样 做 的 好 处 是 可 以 保存 在 收藏 夹 中 和 他 人 分 享 。 如 有 些 时 候 ， 用 户 将 自己 已 经 注册 过 的 一 些 网 站 主 
页 加 入 到 自己 的 收藏 夹 ， 再 次 从 收藏 夹 中 打开 时 ， 会 发 现 已 经 是 登录 的 状态 。 而 采用 post 方式 ， 数 据 
将 以 HTTP 头 的 形式 发 送 ， 表 单数 据 不 再 是 URL 中 的 一 部 分 。 

这 两 种 方式 的 区 别 在 于 ，get 在 安全 性 上 较 差 ， 所 有 的 表单 域 的 值 直接 呈现 。 而 post 除了 只 有 可 见 
的 处 理 脚本 程序 以 外 ， 别 的 信息 都 可 以 隐藏 。 所 以 在 实际 的 运用 中 通常 都 选择 post 这 种 处 理 方式 。 


3. name 属性 


添加 name 属性 是 为 了 令 递交 出 去 的 表单 数据 能 够 被 处 理 这 些 数 据 的 程序 识别 。 在 大 部 分 页 面 中 ， 
很 可 能 放 入 的 表单 不 止 一 个 ， 那 么 就 要 给 不 同 的 表单 起 不 同 的 名 字 ， 便 于 程序 来 识别 。 如 实例 12-1 中 
的 第 27 行 。 


<form name="loandata"> 
这 里 将 表单 命名 为 loandata， 而 在 代码 的 第 15 行 : 
var length = document.loandata.length.value; 


表示 通过 表单 loandata 中 获取 输入 的 length 项 数值 .如 果 代 码 中 有 很 多 不 同 的 表单 ,那么 通过 name 
就 可 以 区 分 它们 。 


4. 编码 方式 


enctype 代表 HIML 表单 数据 的 编码 方式 ， 分 别 有 application/x-www-form-urlencoded 、 
multipart/form-data 和 text/plain 3 种 方式 。application/x-www-form-urlencoded 是 标准 的 编码 方式 ， 提 交 
的 数据 被 编码 为 名 称 / 值 对 。multipart/form-data 属性 表示 数据 编码 为 一 条 信息 ， 为 表单 定义 了 MIME 编 
码 方式 ， 创 建 了 一 个 与 传统 不 同 的 POST 缓冲 区 ， 页 面 上 每 个 控件 对 应 消息 中 的 一 个 部 分 。text/plain 
表示 数据 以 纯 文 本 的 形式 进行 编码 ， 这 样 在 信息 中 ， 将 不 包含 控件 或 者 格式 字符 。 


注意 : multipart/form-data 方 式 上 传 文件 时 ， 不 能 使 用 post 属 性 。 
5. 目标 显示 方式 
target 属性 表示 在 何 处 打开 目标 URL, 可 以 设置 4 种 方式 ，blank 表示 在 新 的 页 面 中 打开 链接 ，self 


® 


表示 在 相同 的 窗口 中 打开 页 面 ，_parent 表示 在 父 级 窗口 中 打开 页 面 ，_top 表示 将 页 面 载 入 到 包含 该 链 
接 的 窗口 ， 取 代 任何 当前 在 窗口 中 的 页 面 。 所 以 ， 一 个 完整 的 <from> 标 签 看 上 去 是 这 样 的 : 
<from action="mailto:depp59@gmail.com" 
method="post" 
name="some" 
enctype="text/plain" 
"target="_blank"> 
</form> 


这 段 代 码 表明 这 个 表单 的 动作 是 发 送 到 邮箱 depp59@gmail.com， 使 用 post 的 传输 方式 ， 使 用 
text/plain 编码 方式 的 some 表单 ， 使 之 在 新 页 面 打 开 。 


12.1.3 ”表单 域 


名 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \ 表 单 域 .wmv 

表单 域 是 用 户 输入 数据 的 地 方 ， 说 得 形象 一 些 ， 就 相当 于 是 用 户 给 程序 下 命令 。 当 然 ， 这 种 下 命 
令 的 方式 有 许多 ， 如 最 常见 的 文本 域 、 下 拉 列 表 等 。 表 单 域 可 分 为 3 个 对 象 : input、textarea 和 select。 
其 中 大 部 分 类 型 的 表单 形式 都 通过 input 属性 来 实现 ，textarea 和 select 创建 一 种 控制 类 型 。 


注意 : 在 12.2 节 中 ， 将 重点 分 析 依赖 这 些 对 象 实现 的 表单 类 型 。 
12.2 通过 表单 展示 不 一 样 的 页 面 


表单 中 包含 多 种 不 同样 式 、 不 同 功 能 的 提交 数据 的 方式 。 在 许多 页 面 中 ， 浏 览 者 不 经 意 间 已 经 不 
断 地 在 使 用 表单 的 功能 ， 如 留言 、 设 置 自己 的 密码 ， 或 者 是 复 选 框 、 下 拉 列 表 等 。 


12.2.1 input 对 象 下 的 多 种 表单 表现 形式 


合 l 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \input 对 象 下 的 多 种 表单 表现 形式 .wmv 
通常 ， 在 页 面 中 见 到 的 大 部 分 表单 的 形式 都 是 通过 输入 标记 input 来 实现 的 ， 一 个 简单 的 样式 看 上 
去 可 以 是 这 样 的 : 
<input name="" 
type="™ 
value="™ 


Size="™" 
maxlength=" > 


name: 表示 输入 数据 的 名 字 ， 其 作用 也 是 为 了 让 程序 明白 所 提交 的 数据 ， 如 实例 12-1 中 第 32 
行 : 


<input type="text" name="length"> 
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输入 的 数据 被 命名 为 length， 在 第 15 行 中 : 

var length = document.loandata.length.value; 

前 面 的 一 个 length 是 程序 定义 的 标识 符 , 后 面 的 一 个 length 则 是 表示 获取 通过 第 32 行 提交 的 length 
数值 。 
注意 : 如 果 第 32 行 中 ,缺少 了 这 样 的 一 个 name 属 性 ， 虽 然 在 浏览 器 中 显示 的 没有 什么 变化 ， 但 事实 上 ， 

后 台 程序 或 者 JavaScript 程 序 就 不 能 获得 提交 的 数据 。 
type: 表示 所 定义 的 是 哪 种 类 型 的 表单 形式 ， 这 个 属性 有 9 个 可 选 值 ， 每 个 类 型 都 有 自己 的 功能 ， 
如 表 12.1 所 示 。 


表 12.1 样式 表 命 名 
类 型 说 明 
text 单行 的 文本 框 
password 将 文本 蔡 换 为 “* ”的 文本 框 
checkbox 只 能 做 二 选 一 的 是 或 否 选择 
radio 从 多 个 选项 中 选 出 唯一 的 一 项 
submit 确定 命令 文本 框 
hidden 设 定 不 可 被 浏览 用 户 修改 的 数据 
image 用 图 片 表示 的 确定 符号 
file 设置 文件 上 传 
button 用 来 配合 客户 端 脚 本 


size: 表示 文本 框 字段 的 长 度 。 
maxlength: 表示 可 输入 的 最 长 的 字符 数量 。 
value: 表示 预先 设置 好 的 信息 。 


12.2.2 text 文本 框 的 样式 表单 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \text 文本 框 的 样式 表单 .wmv 

text 样式 下 的 文本 框 是 一 个 单行 的 文本 框 ， 比 较 常 见于 “登录 ”操作 ， 如 实例 12-2 是 一 个 有 text 
样式 的 表单 。 

【实例 12-2】 本 实例 设置 text 样式 的 表单 。 


re 实例 12-2: 设置 text 样式 的 表单 
源码 路 径 : 光盘 \ 源 文件 \12\12-2.html 


1 

| 

名 <style type="text/css"> 

4 div { width:400px; 

5 font 180% ”微软 雅 黑 ; 

6 margin:auto; // 使 页 面 内 容 居中 窗口 


+CSS 网 页 设计 详解 


FF padding:10px: / 空 距 是 10px 

8 text-align:right; 

9 3 

10 input {font: 50% ”微软 雅 黑 ; /表单 内 的 字体 

11 } 

12 </style> 

13 </head> 

14 <body> 

15 <div> 

16 <form action="..." method="post"> 

村 输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 
18 <br> 输 入 邮箱 地 址 : <input name="address" type="text" size="20" 
19 maxlength="20"> < 上 -设置 输入 文本 的 表单 域 --> 
20 </form> 

21 </div> 

22 </body> 

23 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.2 所 示 。 


上 | mm cs D ~ ©| © Rem css se.. 


EEC EEC 


| 输入 用 户 名 3 [dhedi 
| 输入 邮箱 地 址 : mossesam 一 


E 


图 12.2 text 样式 的 表单 
【深入 学 习 】 注 意 代码 中 第 17 行 和 第 18 行 ， 其 中 size 属性 定义 了 文本 框 的 长 度 ; maxlength 属性 
定义 了 这 个 文本 框 最 多 只 能 输入 20 个 字符 ， 如 果 超 出 这 个 长 度 ， 数 据 将 不 能 被 输入 。 实 例 12-2 中 的 
这 两 个 text 样式 的 数据 定义 了 不 同 的 名 字 ， 这 很 关键 ， 否 则 一 旦 需要 被 程序 调用 ， 数 据 将 无 法 被 辨认 。 
技巧 : 通过 上 面 的 例子 可 以 发 现 ， 表 单 也 是 可 以 通过 CSS 样 式 表 来 控制 的 。 


12.2.3 ”password 输入 密码 的 样式 表单 


鳃 中 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \password 输入 密码 的 样式 表单 .wmv 
这 是 一 个 可 以 将 文本 使 用 保密 形式 展示 出 来 的 一 个 功能 ， 最 常见 的 莫 过 于 用 于 密码 的 设置 。 根 据 
不 同 的 浏览 器 ， 会 使 用 点 状 形态 或 者 星 号 符 来 表示 ， 如 果 在 实例 12-2 中 表单 部 分 代码 写 为 : 
<form action="..." method="post"> 
输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 

<br> 输 入 邮箱 地 址 : <input name="address" type="text" size="20" maxlength="20"> 

<br> 输 入 密码 : <input name="secret" type="password" size="20" maxlength="20"> 
</form> 


那么 ， 这 段 代 码 的 运行 效果 如 图 12.3 所 示 。 
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1= Sl 


(Trmemmcsr oo 


EPem ke 


文件 和 所 日 、 豆 看 (V1 忆 天 夫人 N 工具 和 功 ( 


输入 用 户 名 : Ww 一 


输入 邮箱 


输入 密码 : = 


* Iwww1234@125com 


图 12.3 password 样式 的 表单 


12.2.4 ”checkbox 复 选 框 的 样式 表单 


镶 m 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 12 章 \checkbox 复 选 框 的 样式 表单 .wmv 
checkbox 是 一 个 复 选 框 的 创建 方式 ， 类 似 于 一 个 开关 的 on 和 o 企 选择 ， 浏 览 器 会 在 选择 栏 前 面 提 
供 一 个 方形 小 框 。 如 果 选 择 符合 的 选项 ， 小 框 中 会 添加 小 勾 符 号 表示 被 选中 ， 实 例 12-3 即 是 设置 一 个 
checkbox 样式 的 表单 。 
【实例 12-3】 本 实例 设置 一 个 checkbox 样式 的 表单 。 


实例 12-3: 设置 一 个 checkbox 样式 的 表单 


区 | 源码 路 径 : 光盘 \ 源 文件 \12\12-3.html 


<html> 
<head> 
<title>checkbox 样式 的 表单 </title> 
<style> 
body { font: 100% ”微软 雅 黑 ; 
es 
width:100px; 
font: 120% ”微软 雅 黑 ; 
text-align:right; 
#rightblock a 
width:300px; 
left:120px; 
padding:5px; 
border:2px dotted ; 
text-align:left; 


y 
input {font: 50% ”微软 雅 黑 ; 


} 
h1 {font: 80% 微软 雅 黑 ; 
margin:5; } 
</style> 
</head> 
<body> 
<div id="leftblock"> 注 册 信 息 :</div> 
<div id="rightblock"> 


/ileftblock， 设 置 为 绝对 定位 


/iiightblock， 设 置 为 绝对 定位 
// 设 置 #ightblock 在 页 面 中 的 位 置 
/设置 表单 域 的 边框 样式 


ss 网 页 设计 主人 


28 <form action="..." method="post"> 

29 <input name="truename" type="checkbox" checked="checked"> 使 用 真实 
30 姓名 

31 <h1> 实 名 制 可 以 方便 您 更 好 的 和 朋友 交流 </h1> 

322 <input name="address" type="checkbox" checked="checked"> 显 示 我 的 

33 ”地 址 

34 <!--checked="checked" 使 复 选 框 默认 为 选中 状态 --> 

35 <h1> 如 果 取 消 选 中 ， 其 他 用 户 将 无 法 查 到 你 的 地 址 </h1> 

36 <input name="mail" type="checkbox" checked="checked"> 可 以 给 我 发 邮 
37 件 

38 <h1> 如 果 选 中 ， 我 们 将 会 为 你 发 送 来 自 广告 商 的 信息 </h1> 

39 </form> 

40 </div> 

41 </body> 

42 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.4 所 示 。 
si wT 
NER IE 人 


团 使 用 真 立 姓名 

实名 制 可 以 方 而 区 旱 寻 场 和 加 友 交流 

四 昌 示 我 的 地 址 

如 曲 取 消 选 中 ， 其 他 用 户 将 无 法 查 到 你 的 : 直 


回 可 以 给 我 发 邮件 
如果 光 <h ， 我 们 棕 全 为 你 发 送 林 白 广 告 商 的 信息 


图 12.4 checkbox 样式 的 表单 


注意 : 表单 的 代码 是 第 28~37 行 ， 在 表单 中 添加 “checked="checked"”， 表 示 复 选 框 默认 值 设置 为 
checked， 那 么 小 勾 符 号 会 被 默认 添加 ， 如 图 12.4 所 示 。 


12.2.5 ”radio 单 选 按钮 的 样式 表单 


人 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \radio 单 选 按钮 的 样式 表单 .wmv 

radio 样式 类 似 于 选择 题 ， 在 一 组 选择 中 ， 选 出 唯一 的 一 项 ， 发 送 这 列 数据 。 使 用 的 方法 是 将 同一 
组 选项 定义 为 同一 名 字 ， 但 是 通过 value 属性 来 辨识 它们 之 间 的 不 同 。 具 体 的 使 用 如 实例 12-4 所 示 。 

【实例 12-4】 本 实例 设置 一 个 radio 样式 的 表单 。 


re 实例 12-4: 设置 一 个 radio 样式 的 表单 
源码 路 径 : 光盘 \ 源 文件 \12\12-4.html 


1 <form action="..." method="post"> 

2 <input name="onechoice" type="radio" value="one" checked="checked"> 使 用 邮箱 
3 注册 <!-- 设 置 radio 样式 表单 的 属性 --> 

4 <h1> 您 可 以 通过 自己 习惯 的 邮箱 来 作为 账号 登录 网 站 </h1> 

5 <input name="onechoice" type="radio" value="two"> 通 过 手机 注册 

6 <h1> 您 可 以 通过 手机 免费 获得 我 们 的 账号 </h1> 
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re <input name="onechoice" type="radio" value="three"> 申 请 我 的 ID 号 码 
8 <h1> 您 可 以 通过 网 站 直接 申请 账号 </h1> 
9 </form> 


【运行 程序 】 将 实例 12-3 中 第 28 一 35 行 的 form 表单 替换 为 上 面 的 radio 样式 的 表单 代码 ， 最 终 
页 面 的 显示 效果 如 图 12.5 所 示 。 


| -Emermcs ep- o|Srscmase <| 


ET 


注册 信息 : 


图 12.5 radio 样式 的 表单 


技巧 : radio 样 式 的 表单 是 一 个 多 选 一 的 表单 功能 。 同 样 ， 这 里 也 可 以 使 用 “checked="checked"” 语 向 
来 确定 预先 选中 的 一 项 。 当 选择 唯一 的 目标 后 ， 这 个 选项 将 会 以 数据 形式 被 发 送 。 所 以 ， 这 里 
必须 给 input 对 象 设 定 Value 值 ， 而且 不 同 对 象 的 Value 值 也 不 能 相同 ， 否 则 数据 无 法 被 辨认 。 如 这 
个 表单 中 ，value 属 性 值 依次 设置 的 是 one、two 和 three， 互 不 相同 。 


12.2.6 submit 提交 数据 的 样式 表单 


贸 m 知 识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \submit 提交 数据 的 样式 表单 -wmv 

用 submit 属性 创建 一 个 按钮 ， 该 按钮 的 作用 就 是 提交 数据 。 准 确 地 说 ，submit 属性 负责 “提交 ” 
这 样 的 一 个 动作 。 当 单 击 执行 提交 操作 的 按钮 时 ， 数 据 会 发 送 到 表单 指定 的 地 方 。 如 果 将 实例 12-3 中 
的 checkbox 表单 修改 为 submit 表单 。 那 么 ，submit 的 表单 样式 的 写法 如 实例 12-5 所 示 。 

【实例 12-5】 本 实例 设置 一 个 submit 样式 的 表单 。 


re 实例 12-5: 设置 一 个 submit 样式 的 表单 
源码 路 径 : 光盘 \ 源 文件 \12\12-5.html 


<form action="..." method="post"> 
<input name="onechoice" type="radio" value="one" checked="checked"> 使 用 邮箱 
册 


<h1> 您 可 以 通过 自己 习惯 的 邮箱 来 作为 账号 登录 网 站 </h1> 
<input name="onechoice" type="radio" value="two"> 通 过 手机 注册 
<h1> 您 可 以 通过 手机 免费 获得 我 们 的 账号 </h1> 

<input name="onechoice" type="radio" value="three"> 申 请 我 的 ID 号 码 

<h1> 您 可 以 通过 网 站 直接 申请 账号 </h1> 
<br> 
<inputtype="submit" value=” 确定 "> 
</form> 


【运行 程序 】 浏 览 该 页 面 ， 结 果 如 图 12.6 所 示 。 
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图 12.6 submit 样式 的 表单 


【深入 学 习 】 如 图 12.6 所 示 ， 有 一 个 醒目 的 “确定 ”按钮 。 它 就 是 通过 代码 第 10 行 来 实现 的 ， 这 
也 是 一 个 submit 属性 提交 表单 数据 的 按钮 。 其 中 ， 通 过 value 属性 ， 设 计 者 可 以 修改 按钮 上 的 显示 的 
内 容 。 
此 外 ， 和 submit 属性 类 似 的 还 有 一 个 reset 属性 ， 这 是 一 个 复位 按钮 。 当 被 单 击 时 ， 表 单 的 内 容 会 
被 重新 设置 ， 回 到 页 面 的 初始 状态 。 其 代码 写 起 来 和 submit 样式 类 似 ， 代 码 如 下 : 


<input type="reset"value="” 恢复 "> 
说 明 : 创建 submit 按 钮 或 者 reset 按 钮 时 ，name 属 性 不 是 必需 的 。 


12.2.7 hidden 隐藏 域 的 样式 表单 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \hidden 隐藏 域 的 样式 表单 .wmv 
hidde 属性 可 以 创建 一 个 隐藏 域 , 数据 会 被 隐藏 起 来 , 因此 用 户 是 无 法 操作 的 。 这 样 说 来 似乎 hidden 
没有 什么 作用 。 事 实 上 ， 正 是 出 于 安全 的 考虑 ， 在 多 步 操作 数据 的 同时 ， 用 hidden 来 记录 页 面 的 数据 
并 将 它 隐藏 起 来 。 
这 些 数 据 通常 是 用 户 并 不 关心 ， 但 是 必须 被 提交 的 数据 。 例 如 ， 它 可 能 是 用 户 操作 时 的 特殊 数据 ， 
用 户 并 不 在 意 ， 但 必须 被 提交 。 然 后 ， 当 页 面 跳 转 入 下 一 个 页 面 的 同时 ， 页 面 已 经 继承 第 一 个 页 面 的 
数据 ， 但 是 用 户 是 看 不 到 的 。 最 后 ， 将 用 户 提交 的 所 有 数据 一 并 发 送 至 服务 器 。 
通常 这 种 方式 运用 于 动态 页 面 制作 ， 当 填写 好 第 一 张 表单 时 ， 处 理 表单 的 脚本 程序 可 以 动态 生成 
第 二 张 表 单 。 同 时 ， 其 中 包含 了 第 一 张 表单 的 一 些 数据 ， 例 如 ， 它 们 可 能 看 上 去 是 这 样 的 : 
<form action=some.asp> 
<input type=hidden name=somehidden value=some> 
<input type=submit value=" 下 一 页 "> 
</form> 


当 单 击 “ 下 一 页 ”按钮 ， 跳 转 到 第 二 个 页 面 时 ， 页 面 会 记录 第 一 个 页 面 中 的 数据 : 
<%=request("somehidden")%> 


注意 : 通过 HTML 页 面 源码 ,可 以 查看 该 元 素 属性 的 值 ， 所 以 不 要 使 用 hidden 来 传送 敏感 信息 ， 如 密码 、 
手机 号 码 等 。 
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12.2.8 image 样式 的 表单 


侵 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \image 样式 的 表单 :wmv 
看 上 去 ,image 样式 的 表单 就 像 是 在 页 面 中 放 入 图 像 ， 或 者 又 有 些 类 似 于 图 像 蔡 换文 本 的 技术 , 那 
不 妨 将 其 看 作 是 用 图 像 蔡 换 按钮 的 技术 。 当 图 像 被 单 击 时 ， 数 据 一 并 被 提交 至 服务 器 ， 代 码 如 下 : 


<input type="image" src=" 小 图 标 jpg" alt=” 确定 "> 
同样 在 编辑 图 像 时 ， 使 用 sre 属性 指定 这 张 图 像 的 路 径 ， 使 用 alt 属性 来 添加 文本 注释 ， 其 效果 如 


图 12.7 所 示 。 
2 [5] 
eg | 


注册 信息 : | 避 信 用 吉 答 注 册 i 
可 以 通过 自己 纪 惯 的 邮箱 宁 作 为 如 杂 网 站 | 


图 12.7 image 样式 的 表单 

如 图 12.7 所 示 ，“ 确 定 ”按钮 被 蔡 换 成 一 个 小 小 的 图 像 。 当 单 击 该 图 像 时 ， 其 作用 就 相当 于 单 击 
submit 按钮 。 不 过 ， 当 表单 数据 被 提交 的 同时 ， 用 户 所 单 击 的 图 像 的 位 置 坐 标 也 会 被 发 送 : 

image.x=23 

image.y=59 

不 仅仅 可 以 使 用 图 像 作为 按钮 ， 表 单 中 还 有 一 种 触发 事件 的 button 表单 ，button 样式 只 是 一 个 按 
钮 ,单个 button 按钮 并 不 会 提交 任何 数据 ,其 作用 是 调用 前 端 页 面 , 即 客户 端的 脚本 程序 ， 如 实例 12-1 
的 第 43 行 用 来 调用 一 个 简单 计算 的 JavaScript 脚本 : 


<input type="button" value=" 运 行 " onclick="calculate();"> 


12.2.9 file 上 传 文件 的 样式 表单 


名 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \file 上 传 文件 的 样式 表单 -wmv 
file 样式 的 表单 允许 用 户 上 传 自己 的 文件 ， 这 在 论坛 、 社 区 类 型 的 网 站 中 经 常 遇 到 。 例 如 ， 用 户 上 
传 自己 的 图 像 给 服务 器 ， 用 来 改变 用 户 在 不 同 网 站 上 的 形象 图 片 。 如 实例 12-6 的 代码 中 所 示 的 file 样 
式 的 表单 。 
【实例 12-6】 本 实例 设置 一 个 file 样式 的 表单 。 


区 | 实例 12-6: 设置 一 个 file 样式 的 表单 


源码 路 径 : 光盘 \ 源 文件 \12\12-6.html 
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1 <html> 

ps <head> 

3 <title>file 样式 的 表单 </title> 

4 <style type="text/css" > 

5 body {font: 120% 微软 雅 黑 ; // 设 置 页 面 字体 的 样式 

6 } 

区 input ffont100% 微软 雅 黑 ; /设置 表单 中 按钮 字体 的 样式 
8 | 

9 </style> 

10 </head> 

li <body> 

12 上 传 我 的 文件 : 

13 <form action="..." method="post" enctype="multipart/form-data"> 
14 <input type="file" name="uploadfile" id="uploadfile" /> 

15 </form> 

16 </body> 

17 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.8 所 示 。 
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上 传 我 的 文件 : 


| 


浏览 
臣 100% ~ 
图 12.8 file 样式 的 表单 


注意 : 当 使 用 file 样 式 的 表单 时 , 必须 在 form 的 标签 中 说 明 编码 方式 。 如 “enctype="multipart/form-data"”。 
这 样 ， 服 务 器 才能 接收 到 正确 的 信息 。 


12.3 textarea 对 象 的 表单 


部 MH 知 识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 12 章 \textarea 对 象 的 表单 .wmv 

textarea 对 象 就 像 是 input 对 象 中 text 样式 的 表单 ， 只 不 过 是 扩展 过 的 text 样式 表单 。 它 可 以 通过 
行 (rows) 属性 和 列 〈cols) 属性 来 编辑 文本 域 的 大 小 ， 最 常见 于 留言 板 、 论 坛 中 回帖 时 的 文本 框 等 。 
如 实例 12-7 的 代码 中 所 示 为 textarea 对 象 的 表单 。 

【实例 12-7】 本 实例 设置 一 个 textarea 对 象 的 表单 。 


re 实例 12-7: 设置 一 个 textarea 对 象 的 表单 
源码 路 径 : 光盘 \ 源 文件 \12\12-7.html 


人 
逐 <head> 

沪 <title>file 样式 的 表单 </title> 
4 <style type="text/css" > 
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5 body ffont 120% 微软 雅 黑 ; // 设 置 页 面 字体 的 样式 
6 

更 textarea {font:80% 微软 雅 黑 ; 

8 color:navy; // 设 置 文本 域 字体 颜色 
9 } 

10 </style> 

| </head> 

12 <body> 

13 留言 板 

14 <form action="..." method="post" enctype="multipart/form-data"> 

15 <textarea name="some" rows="10" cols="50"” value="say"> 请 文明 用 语 : 
16 < 上 -设置 textarea 对 象 的 表单 -> 

有 </textarea> 

18 </form> 

19 </body> 

20 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.9 所 示 。 
人 i | 3 

(DED. |B weirme 

| 文件 从 击 雹 (日 ， 本 看 (V) 收 村 夫 (A)】 工具 Mm) 需 2(H) 

留言 板 


| | 而 六 明 用 潜 : 


盈 100% ~ 
12.9 textarea 对 象 创建 的 留言 板 
【深入 学 习 】textarea 属性 标签 是 必须 要 封闭 的 ， 如 代码 第 15 行 和 17 行 。 此外， 在 <textarea> 标 签 
中 放 入 文本 ， 如 代码 第 15 行 中 “请 文明 用 语 : ”， 那 么 在 生成 页 面 的 时 候 ， 会 预先 设置 好 文本 ， 它 可 
以 给 用 户 带 来 亲切 的 感受 。 但 同时 ， 用 户 不 得 不 先 删除 预先 的 文本 再 编辑 自己 的 内 容 ， 所 以 如 何 取舍 
就 要 因地制宜 了 。 
说 明 : 当 在 文本 框 中 输入 的 内 容 超 出 预先 设置 的 行 数 ， 会 自动 出 现 滚动 条 。 如 果 没 有 超出 文本 框 的 范 
围 ， 滚 动 条 呈 灰 色 状 。 


12.4 select 对 象 的 表单 


鳃 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \select 对 象 的 表单 .wmv 
select 对 象 的 表单 将 创建 出 一 个 列表 样式 的 表单 ， 显 示 为 一 个 下 拉 列 表 ， 令 用 户 可 以 方便 地 选择 其 
中 一 个 目录 。 通 常 在 一 些 要 求 填写 户口 地 区 、 生 日 等 信息 时 ， 设 计 者 可 以 给 使 用 者 准备 好 选项 ， 令 使 用 


全 


ss pa ate 


者 填写 信息 时 更 方便 。 在 代码 的 写法 中 ， 需 要 使 用 <option> 标 签 来 定义 可 供 选择 的 每 一 项 。 如 实例 12-8 
所 示 为 页 面 中 select 对 象 的 表单 。 
【实例 12-8】 本 实例 设置 一 个 select 对 象 的 表单 。 


1 -<html> 

2 <head> 

3 <title>select 对 象 的 表单 </title> 

4 <style type="text/css" media="all"> 
5 body {font: 120% 微软 雅 黑 ; 
6 上 

select {font:80% 微软 雅 黑 ; 
8 color:red; /lselect 对 象 的 表单 中 文本 字体 颜色 
9 

10 </style> 

11 </head> 

12 <body> 

13 <form action="> 

14 地 址 : 

15 <select name=" 上 海 " > 

16 <option> 黄 浦 区 </option> // 这 里 是 提供 的 每 个 选项 的 内 容 
1 <option> 虹 口 区 </option> 

18 <option> 静 安 区 </option> 

19 <option> 长 宁 区 </option> 

20 <option> 杨 浦 区 </option> 

21 <option> 宝 山区 </option> 

22 <option> 浦 东 新 区 </option> 

3 <option> 徐 汇 区 </option> 

24 <option> 普 陀 区 </option> 

25 </select> 

26 </form> 

27 </body> 

28 </html> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.10 所 示 。 

【深入 学 习 】 用 户 可 以 通过 下 拉 列 表 选 择 一 个 “地 址 ”， 而 这 个 数据 则 会 被 表单 发 送 到 服务 器 。 
此 外 , 还 可 以 使 用 value 属性 为 每 一 个 option 指定 不 同 的 值 。 如 果 是 这 样 , value 设置 的 值 将 取代 option 
的 文本 内 容 。 
注意 : 如 果 设 计 者 希望 预先 设置 初始 值 ， 那么 在 所 希望 的 option 中 添加 “selected="selected"” 就 可 以 了 ， 

如 “<option selected="selected"> 浦 东 新 区 </option>”。 
此 外 ， 如 果 下 拉 列 表 中 的 选项 太 多 ， 可 以 使 用 <optgroup> 标 签 配合 label 属性 来 给 选项 分 类 。 如 将 
第 15 一 25 行 的 代码 修改 为 如 下 代码 : 


1 <select name=" 上 海 " > 
2 <optgroup label="Team1"> /| 给 选项 分 组 
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3 <option> 黄 浦 区 </option> 

4 <option> 虹 口 区 </option> 

5 <option> 静 安 区 </option> 

6 <option> 长 宁 区 </option> 

区 </optgroup> /| 给 选项 分 组 

8 <optgroup label="Team2"> 
<option> 杨 浦 区 </option> 

10 <option> 宝 山区 </option> 

11 <option> 浦 东 新 区 </option> 

12 <option> 徐 汇 区 </option> 

4149 <option> 普 陀 区 </option> 

14 </optgroup> 


15 </select> 
【运行 程序 】 那 么 在 上 述 代码 中 第 2 行 和 第 7 行 、 第 8 行 和 第 14 行 ， 通 过 <optgroup> 标 签 将 下 拉 
列表 项 目 分 割 成 了 两 部 分 ， 在 页 面 中 的 效果 如 图 12.11 所 示 。 


也)J 同 | 已 merrvucstp 同时 


9 工具] 才 


rm Do | te 


文 t(。 靖 柚 日 ”二 在 (V。 必 十 大 A 工 只 有” 


态 100% ” 3 2 
图 12.10 select 对 象 的 表单 12.11 <optgroup> 标 签 分 组 select 对 象 的 选项 


【深入 学 习 】 此 外 ， 如 果 设 计 者 不 希望 select 对 象 以 下 拉 列 表 的 形式 展示 出 来 ， 有 一 种 方式 可 以 
将 目录 项 以 滚动 条 的 框 体 样式 表现 出 来 。 只 需要 在 <select> 标 签 中 加 入 size 属性 ， 如 “size="6"”， 则 
表示 这 是 一 个 能 容纳 6 行文 字 的 文本 框 。 当 目录 项 超出 设置 的 行 数 ， 将 出 现 滚 动 条 。 所 以 ， 如 果 把 实 
例 12-8 中 第 15 行 写成 : 

<select name=" 上 海 ” size="6"> 


那么 ， 页 面 的 效果 将 变 成 图 12.12 所 示 。 


图 12.12 select 对 象 中 的 size 属性 效果 
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12.5 表单 域 集合 


圳 1 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 12 章 \ 表 单 域 集合 ,wmv 
如 果 一 个 页 面 中 表单 的 项 目 过 于 繁多 ， 设 计 者 可 以 通过 使 用 表单 域 将 表单 分 组 。 当 然 ， 表 单 域 未 
必 是 只 有 表单 太 长 的 情况 下 才 适 合 使 用 。 事 实 上 ， 很 多 时 候 ， 设 计 者 以 这 样 的 方式 来 修饰 表单 部 分 。 
表单 域 的 代码 由 <fieldset> 标 签 和 <legend> 标 签 组 合 而 成 。 默 认 情 况 下 ，<fieldsef> 标 签 绘制 出 表单 
域 的 框 形 ，<legend> 标 签 的 对 象 像 标题 一 样 出 现在 框 形 的 左上 角 。 代 码 如 下 : 
<form action="..." method="post"> 
<fieldset> 
<legend> 注 册 信息 : </legend> 
输入 用 户 名 : <input name="name" type="text" size="20" maxlength="12"> 
<!-- 这 里 可 以 放 入 许多 样式 的 表单 -> 
</fieldset> 
</form> 


【运行 程序 】 这 个 表单 域 在 浏览 器 中 的 效果 如 图 12.13 所 示 。 


[Go 
上 Et EP 


文人 站 短 各 F) 到 要 (Y) 收藏 关内 工具 TT) 大同 人 H) | 


注册 信息 ， 
输入 用 户 名 ， 


图 12.13 表单 域 
12.6 案例 : 制作 一 个 精美 的 由 表单 构成 的 页 面 


颁 4 知识 点 讲解 ， 光 盘 \ 视 频 讲 解 \ 第 12 章 \ 案 例 : 制作 一 个 精美 的 由 表单 构成 的 页 面 .wmv 

在 前 面 的 实例 中 ， 读 者 应 该 感受 到 了 表单 也 是 可 以 通过 CSS 样式 表 来 修饰 的 ， 设 计 者 可 以 通过 样 
式 表 来 修改 表单 中 文本 的 样式 ， 像 框 模型 那样 修饰 表单 的 布局 。 下 面 将 使 用 更 多 的 样式 表 来 表现 一 个 
综合 的 页 面 ， 配 合 页 面 中 的 表单 。 如 实例 12-9 所 示 即 为 页 面 使 用 样式 表 来 修饰 的 表单 。 

【实例 12-9】 本 实例 使 用 样式 表 修饰 表单 的 页 面 。 


re 实例 12-9: 使 用 样式 表 修饰 表单 的 页 面 
源码 路 径 : 光盘 \ 源 文件 \12\12-9.html 


1 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 <htmlxmins="http://www.w3.org/1999/xhtml"> 

4 <head> 

5 <title> 使 用 样式 表 修 饰 表单 的 页 面 </title/> 

6 <style> 


body {background-color:white; 
了 


fieldset {border:2px dashed red; 


padding:10px:; 
margin-top:20px; 
margin-bottom:20px; 


} 

legend {font-family: 微 软 雅 黑 ; 
font-size: 90%; 
letter-spacing: -1px; 
font-weight: bold; 
line-height: 1.1; 
Color-#fff; 
background: orange; 
border: 1px solid #333; 
padding: 2px 6px; 


} 
h1 {font-family: 微 软 雅 黑 ; 
font-size: 175%; 
letter-spacing: -1px; 
font-weight: normal; 
line-height: 1.1; 
Color:#333; 


} 
label {width:140px; 
height:32px; 
margin-top:3px; 
margin-right:2px; 
padding-top:11px; 
padding-left:-6px; 
background-color:maroon; 
float:left; 
display: block; 
font-family: 幼 圆 ; 
font-size: 115%; 
letter-spacing: -1px; 
font-weight: normal; 
line-height: 1.1; 
color:yellow; 
} 
.form {margin:0; 
padding:0; 
} 
#container {width:750px; 
margin:auto; 
padding:10px; 
} 
#top {width:680px; 
height:50px; 


#leftSide { width:530px; 
padding-top:30px; 
float:left: 
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// 设 置 表 单 域 集合 的 样式 表 


// 设 置 表 单 域 集合 标题 的 样式 表 


// 设 置 lable 对 象 的 样式 表 


//#container 设置 页 面 主体 在 窗口 中 的 位 置 


/ttop 用 来 确定 页 面 标题 在 页 面 中 的 位 置 


/定义 页 面 中 整个 表单 的 位 置 
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60 } 

61 .Clear {clear:both; 

62 } 

63 .holder {background-color-##ff; 
64 中 

65 


以 上 样式 表 实现 了 两 部 分 功能 ， 第 9 一 49 行 ， 描 述 了 如 何 定义 表单 域 集合 的 样式 ， 以 及 如 何在 这 
个 表单 域 页 面 中 定义 整个 页 面 的 布局 。 
说 明 : 这 里 采用 leftSide 来 命名 表单 的 样式 表 ， 是 为 了 说 明 如 果 设 计 者 希望 在 表单 右 侧 放 入 其 他 内 容 ， 
可 以 通过 定义 一 个 rightSide 层 放置 其 他 内 容 。 事 实 上 ， 在 很 多 页 面 中 都 是 这 样 做 的 。 


66 .div_texbox {width:347px; // 通 过 样式 表 制 作 表单 域外 部 的 样式 
67 float:right; 

68 height:35px; 

69 margin-top:3px; 

70 padding-top:5px; 

Lal padding-bottom:3px; 

72 padding-left:5px; 

3 background-color:#E6E6E6; 

74 } 

75 .textbox {background-color:#FFFFFF:; // 通 过 样式 表 制 作 表单 域内 部 的 样式 
76 background-repeat: no-repeat; 

Lf background-position:left; 

78 width:285px; 

79 font:normal 18px 微软 雅 黑 ; 

80 color: black; 

81 padding:3px 5px 3px 19px; // 通 过 设置 不 同 大 小 的 空 距 来 制作 阴影 效果 
82 

83 textbox:focus, .textbox:hover {background-color:orange; 

84 } // 通 过 伪 类 来 确定 鼠标 滑 过 表单 域 的 样式 
85 .Username {background-repeat: no-repeat; 

86 background-position:left; 

87 background-color:#FFFFFF:; 

88 width:285px; 

89 font:normal 18px 微软 雅 黑 ; 

90 color: black; 

91 padding:3px 5px 3px 19px; 

92 } 

93 .Username:focus, .username:hover {background-color:orange; 

94 } 

95 .password {background-repeat: no-repeat // 设 置 填写 密码 时 的 样式 

96 background-position:left; 

97 background-color:#FFFFFF:; 

98 width:285px; 

99 font:normal 18px 微软 雅 黑 ; 

100 color: black; 

101 padding:3px 5px 3px 19px; 

102 } 

103 .password:focus, .password:hover {background-color:orange; 

104 } 
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上 面 代码 中 的 样式 表 定 义 了 表单 域 是 如 何 通过 样式 表 来 改变 其 外 表 的 ， 以 及 当 鼠 标 指针 滑 过 表单 
域 时 ， 将 显示 出 怎样 的 效果 : 


105 .button_div /设置 按钮 的 样式 
106 {width:287px; 

107 float:right; 

108 background-color-#fff; 
109 border:1px solid #ccc:; 
110 text-align:right; 

111 height:35px; 

112 margin-top:3px; 

113 padding:5px 32px 3px; 
114 } 

115 .buttons {background: #e3e3db; 
116 font-size:12px; 

117 color: #989070; 

118 padding: 6px 14px; 

119 border-width: 2px; 

120 border-style: solid; 

121 border-color: #ff #d8d8d0 #d8d8d0 ##ff; 
122 text-decoration: none; 

123 text-transform:uppercase; 
124 font-weight:bold; 

125 

126 </style> 

127 </head> 

128 


上 面 代码 中 ， 第 105 一 128 行 定义 了 样式 表 中 按钮 的 样式 。 
以 下 代码 是 页 面 的 结构 标签 : 


129 <body> 

130 <div id="container"> 

le <div id="top"> 

132 <h1> 请 填写 这 张 表 格 : </h1> 

133 </div> 

134 <div id="leftSide"> 

135 <fieldset> 

136 <legend> 注 册 信 息 : </legend> 

137 <form action="login.php" method="POST" class="form"> 

138 <label for="username"> 注 册 名 : </label> 

139 <div class="div_texbox"> 

140 <input name="username" type="text" class="username" id="username" 
141 value="depp" /> 

142 </div> 

143 <label for="password"> 密 码 : </label> 

144 <div class="div_texbox"> 

145 <input name="password" type="password" class="password" 
146 id="password" value="password" /> 

147 </div> 

148 <div class="button_div"> 

149 <input name="Submit" type="button" value=" 确 定 " class="buttons" /> 
150 </div> 

151 </form> 
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152 <div class="clear"></div> 


153 </fieldset> 

154 <hr size="1"> 

155 <fieldset> 

156 <legend> 个 人 信息 : </legend> 

157 <form action="..." method="POST" class="form"> 


158 <label for="name"> 姓 名 : </label> 

159 <div class="div_texbox"> 

160 <input name="name" type="text" class="textbox" id="name" value="Depp" /> 
161 </div> 

162 <label for="address"> 地 址 : </label> 

163 <div class="div_texbox"> 

164 <input name="address" type="text" class="textbox" id="address" value="G 1128" /> 
165 </div> 

166 <label for="city"> 所 属 区 : </label> 

167 <div class="div_texbox"> 

168 <input name="city" type="text" class="textbox" id="city" value=" 浦 东 新 区 " /> 


169 </div> 

170 <label for="country"> 城 市 :</label> 

171 <div class="div_texbox"> 

172 <input name="country" type="text" class="textbox" id="country" value=" 上 海 " /> 
173 </div> 


174 <div class="button_div"> 
175 <input name="Submit" type="button" value=" 确 定 " class="buttons" /> 


176 </div> 
177 </form> 
178 </fieldset> 

179 </div> 

180 </div> 

181 </body> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 12.14 所 示 。 


请 填写 这 纺 表 格 


凡 


ow ~ 


图 12.14 使 用 样式 表 修 饰 表单 的 页 面 
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【深入 学 习 】 这 个 页 面 中 使 用 了 20 个 样式 表 ， 如 果 一 步 一 步 地 分 析 ， 就 没有 看 上 去 的 那么 复杂 。 
body、fieldset、legend、hl 和 label 样式 表 基于 框 模型 的 结构 ， 定 义 了 各 自 对 象 的 字体 的 样式 。.form、 
#container、 共 op、 胡 eftside 这 4 个 样式 表 规划 了 页 面 的 整体 布局 。#container 样式 表 定 位 了 整个 页 面 的 
大 小 ， 而 #top 针对 于 页 面 的 标题 部 分 ， 胡 eftside 样式 表 则 定义 了 表单 部 分 的 位 置 。 

.div_texbox 定义 了 表单 中 文本 域 的 样式 ， 在 实例 中 可 以 视 为 表单 填写 文本 部 分 的 外 框 。 而 .textbox 
样式 表 定 义 了 这 个 对 象 的 内 框 。 由 于 对 padding 属性 设置 了 不 同 的 值 ， 而 制作 出 了 内 谋 的 阴影 效果 。 类 
似 相 同 的 作用 ， 还 有 .button_div 和 .buttons 的 配合 使 用 ， 它 们 配合 的 作用 也 是 制作 出 按钮 的 内 外 边框 的 
样式 ， 来 制造 出 按钮 的 立体 效果 。 


注意 : .textbox 和 .buttons 样 式 表 在 HTML 源码 中 的 位 置 。 


代码 中 第 93 和 94 行 ， 以 及 第 103 和 104 行 ， 分 别 使 用 了 伪 类 来 定义 当 鼠 标 指针 放 在 文本 编辑 杠 
中 和 当 鼠 标 指针 滑 过 文本 编辑 框 时 的 状态 。 


12.7. ls 结 
本 章 介绍 了 表单 的 作用 以 及 表单 的 表现 形式 ， 主 要 的 知识 点 有 : 
表单 的 工作 原理 。 
学 习 如 何 创建 表单 。 


表单 的 主要 样式 以 及 它们 的 作用 。 通 过 这 些 表单 ， 可 以 将 使 用 者 的 信息 递交 给 数据 管理 者 。 根 据 
递交 数据 的 样式 不 同 ， 来 决定 使 用 怎样 的 表单 。 
了 解 表单 中 表单 域 的 意义 ， 它 是 用 来 给 用 户 输入 信息 的 区 域 。 
在 第 13 章 中 ， 将 介绍 JavaScript 的 入 门 的 基础 知识 ， 即 JavaScript 的 基本 语法 。 这 是 真正 提高 制 
作 页 面 水 平 的 路 径 。 


12.8 本 章 习 题 


习题 12-1 创建 一 个 简单 的 只 有 输入 框 的 表单 ， 如 图 12.15 所 示 。 

【分 析 】 本 题 考查 读者 对 创建 表单 、 表 单 中 输入 框 的 定义 掌握 程度 。 

【关键 代码 】 

<p> 学 生 信息 录入 表 </p> 

<p> 姓 名 : <input type="text" name="srk1"size="10"/><br /><br /> 

年 龄 : <input type="text" name="srk2" size="10"/><br /><br /> 

性 别 : <input type="text" name="srk1"size="10"/> 

习题 12-2 创建 一 个 颜色 信息 调查 表单 ， 其 中 包含 复 选 框 、“ 提 交 ” 按 钮 等 信息 ,效果 如 图 12.16 
所 示 。 


_ 国 


em olen E>) 
[Sa FNPHIML+CSS+ht PD" | 车 FHTML+csS 1.. > 
| zem_ san ssw aaxm Tam mm | 


ET 


请 选择 您 喜欢 的 商 色 : 
口红 区 群 回 商 口 绿 名 再 口 蓝 口 党 
[ 酸 ] 
图 12.15 创建 只 有 输入 框 的 表单 图 12.16 创建 复 选 框 和 提交 按钮 
【分 析 】 本 题 主要 考查 读者 对 复 选 框 和 按钮 的 掌握 程度 。 
【关键 代码 】 
<input type="checkbox"/> 红 
<input type="checkbox"/> 栓 
<input type="checkbox"/> 黄 
<input type="checkbox"/> 绿 
<input type="checkbox"/> 青 
<input type="checkbox"/> 蓝 
<input type="checkbox"/> 紫 
<input type="button" value=" 提 交 "> 


习题 12-3 ”创建 一 个 问卷 表单 ， 其 中 课程 选项 要 求 为 下 拉 列 表 选 项 ， 效 果 如 图 12.17 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 设置 选择 列表 框 的 掌握 情况 。 
【关键 代码 】 


<select> 
<option>C 语言 </option> 
<option>C#</option> 
<option>C++</option> 
<option> 汇 编程 序 语言 </option> 
</select> 


习题 12-4 ”创建 一 个 简单 的 留言 板 表单 ， 其 中 包含 了 “提交 ”按钮 ， 效 果 如 图 12.18 所 示 。 
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图 12.17 创建 列表 菜单 图 12.18 创建 留言 板 
【分 析 】 本 题 主要 考查 读者 对 textarea 对 象 设置 的 掌握 程度 。 
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【关键 代码 】 


<form class="wz" action="" method="post"> 
<p> 请 留 下 您 对 本 网 站 的 意见 </p> 
<textarea name="yj" cols="50" rows="10"> 请 在 这 里 留 下 您 宝贵 的 意见 </textarea> 
<p class="an"><input type="submit" name="tj" value=" 提 交 "></p> 
</form> 


习题 12-5 下面 给 出 一 段 代码 ， 请 解释 该 段 代 码 的 含义 。 
<form action="" target="_blank">...</form> 


【分 析 】 从 这 段 代码 的 开始 、 结 束 标签 可 以 知道 ， 这 段 代 码 描述 的 是 一 个 表单 。 而 <form> 标 签 中 
的 属性 表示 的 是 指向 链接 跳 转 方式 ，target 中 的 属性 值 表 示 此 网 页 跳 转 到 一 个 新 的 网 页 中 。 


第 13 章 在 网 页 中 加 入 神奇 的 效果 


在 学 习 了 HTML 和 CSS 之 后 ， 设 计 者 可 以 制作 出 一 些 精美 的 网 页 ， 而 未 来 的 趋势 不 仅仅 是 要 求 页 
面 的 美观 ， 或 者 说 ， 无 法 互动 的 网 页 始终 无 法 满足 所 有 用 户 的 要 求 。 为 了 让 网 页 能 有 动态 的 变化 ， 使 
得 用 户 可 以 与 网 页 进行 交互 ， 正 提供 了 Dynamic HTML 技术 ， 简 称 为 DHTML。DHTML 主要 由 3 个 
部 分 组 成 ， 分 别 为 HTML 网 页 标记 、Script 语言 与 CSS。 而 最 常用 的 脚本 语言 是 JavaScript， 对 于 追求 
更 高 页 面 效果 的 设计 者 ，JavaScript 是 在 网 页 设计 这 个 “世界 ”中 立足 的 “ 利 剑 ”。 本 章 的 主要 知识 点 
如 下 。 

脚本 语言 的 概念 、 常 用 的 两 种 脚本 语言 介绍 。 
区 别 JavaScript 和 Java。 
JavaScript 基本 语法 ， 包 括 标识 符 、 基 本 数据 类 型 、 运 算 符 、 表 达 式 、 流 程控 制 以 及 函数 。 
通过 一 个 案例 来 展示 JavaScript 基本 语法 的 用 法 。 


13.1 什么 是 脚本 语言 


脚本 语言 是 一 种 解释 性 语言 ， 不 需要 编译 ， 一 般 用 来 编写 嵌入 在 网 页 中 的 程序 ， 由 浏览 器 来 负责 
解释 执行 。 浏 览 器 一 般 都 由 相对 应 的 脚本 引擎 来 解释 执行 ， 所 以 支持 脚本 程序 的 浏览 器 需要 集成 用 于 
解释 脚本 程序 的 模块 。 参 照 第 12 章 中 的 实例 12-1， 在 HTML 网 页 中 ， 脚 本 程序 代码 是 放 在 <scripf> 标 
签 中 的 ， 浏 览 器 正 是 通过 该 标签 来 识别 脚本 程序 。 

脚本 语言 一 般 以 文本 的 形式 存在 ， 而 不 像 C、C++ 那 样 可 以 编译 成 二 进 制 代码 ， 也 不 用 像 Java 那 
样 解释 生成 .class 文件 。 通 常 在 大 多 数 网 页 设计 中 , 开发 者 经 常 使 用 的 脚本 语言 有 VBScript(Visual Basic 
Script) 、JavaScript 和 ActionScript 等 。 目 前 最 常用 的 两 种 脚本 语言 是 VBScript 和 JavaScript。 


13.1.1 初 识 VBScript 


鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \ 初 识 VBScript.wmv 
VBScript 是 基于 Microsoft 公司 的 Visual Basic, 其 广泛 应 用 于 网 页 和 ASP 程序 制作 , 因为 VBScript 
与 Visual Basic 的 紧密 联系 ， 所 以 对 于 拥有 Visual Basic 开发 经 验 的 程序 员 来 说 ， 很 容易 入 门 。 现 在 通 
过 一 个 简单 的 实例 来 体验 它 的 效果 ， 如 实例 13-1 所 示 为 一 个 简单 的 VBScript 程序 。 
【实例 13-1】 本 实例 是 一 个 VBScript 的 简单 程序 。 


re 实例 13-1: 一 个 VBScript 的 简单 示例 
源码 路 径 : 光盘 \ 源 文件 \13\13-1.html 


1 -<html> 
2 <head> 


网 <tile>VBScript 简单 使 用 </title> 

4 <script language="VBScript"> /使 用 VBScript 
5 <l= 

6 Sub Button1_OnClick 

六 MsgBox "Hello! 这 是 VBScript 代码 产生 的 效果 " 
8 End Sub 

9 = 

10 </script> 

11 </head> 

12 <body> 

3 <h3>VBScript 简单 使 用 </h3><HR> 

14 <form> 

15 <input name="Button1" type="BUTTON" value=" 显 示 VBScript"> 
16 </form> 

17 </body> 

18 </html> 


注意 : 浏览 器 通过 “language="VBScript"” 来 明确 执行 的 脚本 语言 是 VBScript。 


将 上 面 的 代码 粘贴 到 vbscripthtml 文件 的 源 代码 中 ， 单 击 浏览 器 中 的 “刷新 ”按钮 ， 运 行 效果 如 
图 13.1 所 示 。 之 后 再 次 单 击 “ 显 示 VBScript” 按 钮 ， 显 示 效果 如 图 13.2 所 示 。 
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13.1 一 个 VBScript 编写 的 简单 页 面 13.2 单 击 “ 显 示 VBScript” 按钮 的 显示 结果 


在 单 击 按钮 后 ， 会 出 现 一 个 对 话 框 ， 这 个 对 话 框 就 是 用 VBScript 实现 的 ， 即 实例 13-1 中 的 第 4 一 
10 行 的 代码 。 


13.1.2 ”学习 JavaScript 的 起 步 


僵 d 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \ 学 习 JavaScript 的 起 步 .wmv 

JavaScript 是 Netscape 公司 借鉴 Sun 公司 的 Java 的 相关 概念 , 将 其 自身 的 Livescript 进行 重新 设计 
之 后 推出 的 。 因此 JavaScript 的 很 多 语法 都 与 C++、Java 的 风格 非常 相似 。 学 习 这 些 编程 语言 将 有 助 于 
学 习 JavaScript。 与 CH+、Java 等 编程 语言 类 似 ， 在 JavaScript 中 也 包含 类 、 对 象 、 变 量 和 函数 等 ， 而 
且 使 用 的 流程 控制 也 基本 相似 。 不 同 之 处 在 于 JavaScript 的 语法 规则 更 松散 ， 不 像 编程 语言 那么 复杂 。 

例如 ， 对 于 变量 的 定义 , 在 JavaScript 中 只 需 通过 var 定义 即 可 ,而 不 必 像 编程 语言 中 定义 其 为 int 
或 char。 此 外 ， 由 于 JavaScript 代码 不 会 被 编译 为 二 进 制 代码 文件 ， 只 是 作为 一 种 网 页 文件 〈 在 本 书 中 


_ 国 


+CSS 网 页 设计 详解 


指 HTML 文件 ) 的 一 部 分 由 浏览 器 解释 执行 。 因 此 ， 修 改 起 来 也 要 比 编程 语言 在 集成 平台 中 方便 。 所 
以 JavaScript 是 一 种 简单 易学 的 语言 , 但 又 是 一 种 具有 强大 特效 功能 的 语言 。 同 样 ,现在 通过 一 个 简单 
的 实例 来 初步 了 解 一 下 JavaScript 的 魅力 ， 如 实例 13-2 展示 的 是 和 实例 13-1 同样 效果 的 页 面 。 不 同 的 
是 这 里 使 用 的 脚本 语言 是 JavaScript 语言 。 

【实例 13-2】 本 实例 为 一 个 简单 的 JavaScript 程序 ， 其 源码 展示 如 下 。 


re 实例 13-2: JavaScript 的 简单 示例 
源码 路 径 : 光盘 \ 源 文件 \13\13-2.html 


1 -<html> 

pA <head> 

3 <title>JavaScript 简单 使 用 </title> 

4 <script language="JavaScript"> /使 用 JavaScript 
5 function button1() 

6 { 

区 alert("Hello! 这 是 JavaScript 的 显示 效果 "); 

8 > 

9 </script> 

10 </head> 

11 -<body> 

12 <center> 

13 <h3>JavaScript 简单 使 用 </h3><HR> 

14 </center> 

15 <form> 

16 <input name="Button1" type="BUTTON" value=" 显 示 JavaScript 效果 " 
17 onclick="button1()"> 

18 </form> 

19 </body> 

20 </html> 


注意 : 浏览 器 通过 “language="JavaScript" ”来 明确 执行 的 脚本 语言 是 JavaScript。 


【运行 程序 】 将 上 面 的 代码 直接 粘贴 在 javascript.html 文件 的 源 代码 中 ， 单 击 “ 刷 新 ”按钮 ， 运 行 
效果 如 图 13.3 所 示 。 再 次 单 击 “ 显 示 JavaScript 效果 ”按钮 ， 运 行 效果 如 图 13.4 所 示 。 
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图 13.3 一 个 JavaScript 编写 的 简单 页 面 图 13.4 单 击 “ 显 示 JavaScript 效果 ”按钮 的 显示 结果 


说 明 : 读者 可 能 暂时 不 理解 JavaScript 部 分 的 代码 ， 在 后 续 的 章节 中 将 会 详细 讲解 如 何 使 用 JavaScript 设 
计 漂 亮 的 网 页 。 


后 
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【深入 学 习 ] 可 以 看 到 ,用 JavaScript 同样 实现 了 上 面 VBScript 中 例子 的 功能 。 单 击 ^ 显示 JavaScript 
效果 ”按钮 之 后 , 同样 出 现 一 个 对 话 框 , 而 此 处 是 使 用 实例 13-2 中 第 4 一 9 行 的 JavaScript 代码 实现 的 。 
另外 在 使 用 button 按钮 时 需要 通过 onclick 指明 调用 的 函数 ， 如 实例 13-2 中 的 第 17 行 代码 所 示 。 

正 是 由 于 JavaScript 与 CH+、Java 等 编程 语言 的 相似 性 ， 且 易 阅 读 、 易 掌握 ， 所 以 大 部 分 网 页 设计 
者 偏爱 使 用 JavaScript。 对 于 初学 者 来 说 ， 学 习 一 种 编程 技术 时 跟随 趋势 是 一 条 很 不 错 的 捷径 ， 往 往 可 
以 事半功倍 。 因 为 JavaScript 的 发 展 已 比较 成 熟 ， 供 初学 者 参考 的 范例 和 可 借鉴 的 经 验 也 较 多 ， 这 样 就 
可 以 大 大 减少 在 学 习 中 可 能 出 现 的 问题 。 


13.2 JavaScript 和 Java 的 区 别 


仿 q 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \JavaScript 和 Java 的 区 别 .wmv 

在 13.1 节 中 提 到 ，JavaScript 与 目前 盛行 的 编程 语言 Java 比较 相似 。 然 而 对 于 学 习 者 来 说 ， 需 要 
明确 JavaScript 与 Java 是 不 一 样 的 ， 有 很 多 初学 者 不 明白 这 两 者 的 区 别 。 事 实 上 ， 它 们 并 不 像 字面 看 
上 去 的 那样 联系 紧密 ，JavaScript 并 不 是 Java 的 子 集 ,而 是 有 很 大 的 区 别 , 不 理解 这 点 可 能 会 将 二 者 混 
为 一 谈 。 在 日 常 工作 、 学 习 中 不 乏 将 二 者 混淆 的 例子 ， 经 常 有 编程 者 把 Java 中 出 现 的 问题 提交 到 
JavaScript 的 学 习 交 流 社区 ， 或 者 将 JavaScript 的 难题 求助 于 Java 学 习 社 区 。 

JavaScript 和 Java 是 分 别 来 自 两 个 不 同 公司 的 产品 ， 这 很 显然 地 决定 了 二 者 有 很 大 的 差异 。Java 
是 Sun 公司 推出 的 一 种 面向 对 象 的 程序 设计 语言 ， 非 常 适合 于 Internet 应 用 程序 的 开发 。 而 JavaScript 
是 Netscape 公司 为 了 扩展 Netscape Navigator 功能 而 开发 的 产品 , 是 一 种 基于 对 象 和 事件 驱动 的 解释 性 
语言 ， 通 常 嵌 入 Web 页 面 中 。 

JavaScript 借鉴 了 Java 的 相关 概念 ， 所 以 二 者 在 语法 上 有 很 多 相似 之 处 ， 但 也 不 完全 相同 。 例 如 ， 
其 各 自 所 使 用 的 变量 是 不 一 样 的 。JavaScript 是 弱 类 型 变量 声明 ， 即 没有 非常 严格 的 类 型 声明 要 求 ， 在 
定义 时 只 需要 使 用 var 定义 即 可 。 在 运行 时 由 解释 器 检查 其 数据 类 型 〈 即 动态 联 编 ) ， 而 Java 采用 强 
类 型 变量 检查 ， 所 有 变量 在 使 用 前 必须 声明 数据 类 型 〈 即 静态 联 编 ) 。 

此 外 ， 二 者 在 嵌入 方式 上 也 不 一 样 ，Java 通过 <applef> 标 签 来 标识 ， 是 一 种 与 HIML 无 关 的 格式 。 
其 代码 以 字 节 代码 的 形式 保存 在 独立 的 文档 中 ， 必 须 通过 HTML 引用 装载 。 而 JavaScript 是 以 文本 的 
形式 存在 ， 可 以 直接 放 在 <script> 标 签 之 间 。 
注意 : 当 明 白 了 JavaScript 与 Java 的 区 别 之 后 ， 对 于 有 Java 开 发 经 验 的 读者 来 说 ， 可 以 避免 将 Java 中 的 思 

路 带 入 到 JavaScript 中 。 而 对 于 页 面 开 发 的 初学 者 来 说 ， 也 不 必 受 Java 的 干扰 。 


13.3 JavaScript 的 基本 语法 


前 面 介绍 了 什么 是 JavaScript， 以 及 JavaScript 的 特点 , 并 且 通 过 一 个 简单 的 JavaScript 示例 实现 了 
单 击 按钮 弹出 对 话 框 的 功能 。 对 比 之 前 讲 过 的 HIML, 设计 者 可 以 初步 体验 到 JavaScript 与 用 户 互动 的 
特效 功能 。 然 而 这 个 示例 只 是 冰山 一 角 ， 还 不 足以 完全 展现 JavaScript 的 魅力 。 从 本 节 开 始 将 详细 地 学 
习 JavaScript， 像 其 他 编程 语言 一 样 ， 需 要 先 从 基本 的 语法 开始 。 
@ 
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13.3.1 JavaScript 中 的 标识 符 和 保留 关键 字 


人 Hf 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \JavaScript 中 的 标识 符 和 保留 关键 字 .wmv 

也 许 有 C、C++ 或 者 Java 编程 经 验 的 人 对 标识 符 这 个 概念 已 经 不 陌生 了 ，JavaScript 中 的 标识 符 与 
其 他 编程 语言 中 的 概念 基本 一 样 ， 是 指 JavaScript 中 定义 的 符号 ， 必 须 以 字母 、 下 划 线 (_) 或 美元 符 
号 〈$) 开始 。 其 他 字符 可 以 是 字母 、 数 字 、 下 划 线 或 美元 符号 ， 例 如， 变量 名 、 函 数 名 等 。 但 是 ， 标 
识 符 不 能 是 JavaScript 中 的 保留 关键 字 且 不 能 包含 空格 。 

例如 ， 下 面 都 是 定义 “电话 号 码 ” 的 合法 标识 符 : 

telephoneNum 

telephone_Num 

_telephoneNum 


StelephoneNum 
tl 


JavaScript 的 标识 符 对 大 小 写 敏感 ,telephoneNum 和 telephonenum 是 两 个 不 同 的 标识 符 , 这 是 在 编 
写 代码 过 程 中 很 容易 出 现 的 疏忽 。 此 外 在 实际 定义 标识 符 时 可 根据 大 多 数 人 的 习惯 来 定义 ， 一 般 用 第 一 
种 定义 方法 ， 如 telephoneNum。 利 用 名 字 组 合 可 以 望 文生 义 ， 便 于 理解 ， 如 果 定 义 成 t， 就 很 难 理解 
了 。 名 字 组 合 时 第 一 个 单词 首 字 符 小 写 ， 后 边 的 单词 首 字母 均 大 写 ， 这 样 做 既 便于 阅读 ， 又 便于 输入 。 
下 面 的 都 是 非法 标识 符 : 


this /this 是 JavaScript 中 的 保留 关键 字 

2008_Olympic // 标 识 符 不 能 以 数字 开头 

2008.08 /标识 符 中 不 能 含有 点 〈.) 

One World /标识 符 中 不 能 含有 空格 

使 用 者 在 编写 时 为 了 避免 使 用 保留 关键 字 来 定义 标识 符 ， 可 以 参考 表 13.1 中 总 结 的 JavaScript 保 
留 关键 字 。 


表 13.1 JavaScript 保留 关键 字 


abstract Break 
byte Catch 
char Class const 
continue default Do 
double else extends 
false finally Float 
for function Goto 
in instanceof Int 

让 implements import 
interface long Native 
new null package 
private protected Public 
retum Static 
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续 表 
super synchronized 
this throws 
transient Try 
Var While 
with 


说 明 : 除了 表 13.1 中 的 保留 关键 字 ， 在 定义 标识 符 时 还 要 避免 那些 已 经 用 做 JavaScript 的 内 部 对 象 或 函 
数 的 名 称 的 词 。 例 如 ，string 或 alert 等 单词 。 当 在 运行 时 提示 标识 符 错误 时 ， 如 果 不 在 上 边 介 绍 
的 非法 字符 之 列 ， 不 妨 检查 一 下 是 否 用 了 已 定义 好 的 内 部 对 象 或 函数 的 名 称 。 


13.3.2 ” JavaScript 语法 的 特殊 规则 


侣 HH 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 13 章 \JavaScript 语法 的 特殊 规则 .wmv 
JavaScript 对 大 小 写 非常 敏感 ， 在 程序 中 定义 xman 和 Xman 是 不 同 的 ， 这 是 两 个 变量 。 前 面 已 经 
提 过 ,在 此 处 再 提 是 因为 这 是 一 个 初学 者 犯错 率 很 高 的 知识 点 。HTML 是 对 大 小 写 不 敏感 的 ，xman 和 
Xman 是 一 样 的 。 将 JavaScript 嵌入 在 HIML 很 容易 混淆 ， 要 保持 高 度 的 警惕 性 。 
- 般 情况 下 ，JavaScript 每 条 执行 语句 的 后 面 都 要 以 英文 分 号 (;) 来 结束 。 但 是 当 JavaScript 的 代 
码 作为 属性 值 时 ， 最 后 一 句 后 面 的 分 号 可 以 省 略 ， 例 如 : 
action="javascript:checkDay()" /| 省略 了 最 后 的 分 号 


注意 英文 标点 符号 和 中 文 标点 符号 的 区 别 , 在 JavaScript 中 用 的 都 是 英文 标点 符号 ,不 只 是 初学 者 ， 
就 是 身 经 百 战 的 开发 者 ， 有 时 候 也 会 将 “,” 写 成 “，”， 将“;” 写 成 “; ”。 这 也 是 在 调试 程序 时 应 
该 重点 检查 的 地 方 。 
注意 : 在 JavaScript 中 ，“//” 表 示 注 释 一 行 代码 ， 注 释 多 行 代码 时 使 用 “/*” 开 头 ， 以 “*/” 结 尾 。 另 
外 ，“/* */” 中 可 以 谋 套 “//”， 但 不 能 嵌 套 “/* */”， 因 为 第 一 个 “/*” 会 与 其 后 面 第 一 次 出 
现 的 “*/” 配 对 ， 例如: 


<script language="javascript"> 
六 


// 第 一 个 注释 符 
A* 下 面 的 代码 会 弹出 一 个 警告 框 */ // 第 二 个 注释 符 
警告 框 中 的 内 容 是 “好 运 2008! ” 
ey 
alert(" 好 运 2008"); 
</script> 


上 面 代码 中 第 一 次 出 现 的 “*/” 会 与 第 一 个 “/*” 配 对 , 导致 “警告 框 中 的 内 容 是 “好 运 20081 ，” 
没有 被 注释 掉 ， 所 以 JavaScript 无 法 解释 这 个 字符 串 ， 打 开 页 面 时 就 会 出 现 错误 。 


13.4 JavaScript 的 数据 类 型 


JavaScript 数据 类 型 包括 基本 数据 类 型 和 内 置 数据 类 型 。 基 本 数据 类 型 一 般 包括 5 种 : 整 型 、 实 型 、 
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字符 串 型 、 布 尔 型 和 空 值 。 基 本 数据 类 型 定义 的 数据 可 以 是 常量 也 可 以 是 变量 。JavaScript 的 常量 又 称 
为 字面 常量 ， 其 值 不 能 随便 改变 。 变 量 是 程序 向 系统 申请 的 内 存单 元 ， 用 来 存储 各 种 类 型 的 数据 。 


13.4.1 常量 


右 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \ 常 量 .wmv 
与 基本 数据 类 型 相对 应 ， 常 量 一 般 分 为 5 种 ， 分 别 是 整 型 常量 、 实 型 常量 、 布 尔 型 常量 、 字 符 型 
常量 和 空 值 。 在 编写 JavaScript 程序 时 ， 常 量 数据 类 型 是 应 用 广泛 、 常 见 的 一 种 类 型 。 
整 型 常量 : 一 般 来 说 ， 整 型 常量 可 以 采用 十 进 制 、 八 进 制 和 十 六 进 制 来 表示 。 十 进 制 的 首位 不 能 
是 数字 0, 如 2008。 八进制 以 0 为 首位 , 如 0351。 十 六 进 制 以 0x 或 0X 开头 , 如 0x86 或 0X86。 
这 3 种 进 制 是 可 以 相互 转化 的 。 
实 型 常量 : 就 是 可 以 采用 整数 部 分 加 小 数 部 分 的 形式 来 表示 的 值 ， 也 可 以 采用 科学 计数 法 来 表示 。 
如 实数 1000.00 用 科学 计算 法 表示 是 1E3 或 1e3。 
布尔 型 常量 ， 有 两 个 值 ， 分 别 是 tue 和 false。 通 常 在 流程 控制 中 ， 作 为 判断 条 件 。 
字符 型 常量 ， 是 用 单 引号 (') 或 双 引 号 〈") 引起 来 的 0 个 、 一 个 或 几 个 字符 ， 例 如 ，"One World 
One Dream"、"a"、"" 〈"" 表 示 一 个 空 字符 串 )。 
注意 : 同 Java 语 言 一 样 ，JavaScript 中 以 反 斜 杠 〈\) 作为 转 义 字符 来 表示 一 些 特殊 字符 ， 如 \、\n 等 。\\ 
表示 斜 杠 ，\ 表 示 换 行 。 


空 值 ， 即 表示 什么 也 没有 ， 当 引用 没有 定义 的 变量 时 ， 就 返回 一 个 null 值 。 
13.4.2 变量 


右 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 13 章 \ 变 量 .wmv 

变量 并 不 是 指 一 个 变换 不 定 的 元 素 ， 变 量 相当 于 设置 好 一 个 位 置 ， 或 者 是 一 个 符号 ， 使 用 者 可 以 
将 不 同 的 元 素 定义 为 这 个 位 置 或 者 符号 ， 这 就 是 变量 的 含义 。JavaScript 中 采用 弱 类 型 的 变量 形式 ， 即 
声明 一 个 变量 时 不 必 指 明 其 为 整 型 还 是 字符 型 。 而 是 使 用 关键 字 var 声明 即 可 ， 例 如 : 


var telephoneNum; 

这 条 语句 定义 了 一 个 变量 ， 即 申请 了 内 存 。 但 还 没有 值 ， 可 以 在 使 用 时 为 其 赋值 ， 如 将 一 个 数值 
赋 给 这 个 变量 : 

telephoneNum=62286688; 

也 可 以 在 变量 声明 时 就 为 其 赋值 ， 例 如 : 

var telephoneNum=62286688; 

上 面 的 定义 方法 与 其 他 编程 语言 中 的 定义 方法 是 一 样 的 。JavaScript 的 特殊 之 处 在 于 可 以 不 事先 声 
明 变量 而 直接 使 用 。 浏 览 器 在 解释 执行 到 该 语句 时 ， 会 自动 产生 一 个 相应 类 型 的 变量 ， 例 如 : 

school="BUPT"; 

浏览 器 在 解释 执行 上 面 的 语句 时 就 用 自动 产生 一 个 字符 串 型 变量 。 比 较 好 的 方法 是 事先 声明 变量 ， 


@ 
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这 样 做 的 好 处 是 能 及 时 发 现代 码 中 的 错误 。 因为 JavaScript 是 采用 动态 编译 的 , 而 动态 编译 是 不 易 发 现 
代码 中 的 错误 ， 特 别 是 变量 命名 方面 。 


13.4.3 ”数据 类 型 转换 


风 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \ 数 据 类 型 转换 .wmv 

在 数据 类 型 的 使 用 过 程 中 ， 经 常会 遇 到 返回 值 并 不 是 要 求 的 数据 类 型 的 情况 ， 这 就 需要 在 不 同 数 
据 类 型 之 间 进 行 转换 。JavaScript 中 数据 类 型 的 转换 方法 有 两 种 : 一 是 将 整个 值 从 一 种 类 型 转换 为 另 一 
种 数据 类 型 ， 二 是 从 一 个 值 提取 另 一 种 类 型 的 值 ， 并 完成 转换 工作 。 


注意 : 在 13.4.4 节 要 讲 的 表达 式 运算 中 也 需要 统一 数据 类 型 。 
1. 一 种 类 型 转换 为 另 一 种 数据 类 型 


这 种 情况 有 3 种 转换 方法 : 分 别 是 Sting0、Number0 和 Boolean0 方 法 。 
String() 方 法 : 表示 将 任意 一 种 数据 类 型 转换 为 字符 型 。 例 如 : 


String(2008); 


其 转换 结果 为 : "2008"。 
Number() 方 法 : 将 任意 一 种 数据 类 型 转换 为 数值 型 。 例 如 : 


Number("2008"); 


其 转换 结果 为 : 2008。 
Boolean() 方 法 : 将 任意 一 种 数据 类 型 转换 为 布尔 型 。 例 如 : 


Boolean("aaa"); 
其 转换 结果 为 : true。 
2. 从 一 个 值 提 取 另 一 种 类 型 的 值 并 完成 转换 工作 


这 种 情况 也 有 3 种 转换 方法 : 分 别 是 pareInt0、parseFloat0 和 eval0 方 法 。 
parseInt0 方 法 : 表示 提取 字符 串 中 的 整数 。 例 如 : 


parselnt("2008Olympic"); 


其 转换 结果 为 : 2008。 
parseFloat0 方 法 : 表示 提取 字符 串 中 的 浮 点 数 。 例 如 : 


parseFloat("2008.08Olympic"); 


其 转换 结果 为 : 2008.08。 
eval0 方 法 : 表示 执行 用 字符 串 表 示 的 一 段 JavaScript 代码 。 例 如 : 


nextOlympic=eval("2008+4"); 


其 转换 结果 为 : nextOlympic=2012。 


ss na at 


13.4.4 ”运算 符 


名 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 13 章 \ 运 算 符 .wmv 

JavaScript 是 用 来 处 理 对 象 运算 的 符号 ， 是 具有 全 范围 的 运算 符 。 按 照 处 理 对 象 的 数目 分 为 单元 运 
算 符 、 二 元 运算 符 和 三 元 运算 符 。 更 常见 的 分 类 方法 是 按照 功能 来 分 ， 分 别 是 赋值 运算 符 、 算 术 运 算 
符 、 比 较 运 算 符 、 罗 辑 运算 符 和 位 运算 符 。 


1. 算术 运算 符 
JavaScript 中 常用 的 算术 运算 符 如 表 13.2 所 示 。 
表 13.2 算术 运算 符 

运 算 符 示例 
二 加 法 运算 或 者 正 值 运算 符 +2008，+2 
- 减法 运算 符 或 赋值 运算 符 100-8，-9 
* 乘法 运算 符 3*5 
/ 除法 运算 符 12/4 
% 求 模 运算 符 5%3 
二 将 变量 值 加 1 后 再 将 结果 赋 给 这 个 变量 ++1， 1+4+ 


-- 将 变量 减 1 后 再 将 结果 赋 给 这 个 变量 --1，1-- 


注意 : 当 表 达 式 中 至 少 有 一 个 字符 串 时 ，“+” 表 示 多 个 字符 串 的 连接 。 例 如 ，“"Olympic"+2008” 的 
结果 是 "Olympic2008"。 
++ 有 两 种 用 法 : +Hy 和 y++。 前 者 是 变量 先 将 自己 加 1， 再 参与 其 他 运算 ， 而 后 者 是 变量 在 参与 
其 他 运算 后 ， 再 将 自己 加 1。-- 与 ++ 用 法 一 样 。 


2. 赋值 运算 符 
赋值 运算 符 是 将 其 右边 的 一 个 值 或 者 表达 式 的 值 赋 给 其 左边 的 变量 ， 常 用 的 赋值 运算 符 如 表 13.3 
表 13.3 常用 的 赋值 运算 符 


3. 比较 运算 符 
比较 运算 符 用 在 逻辑 语句 中 ， 比 较 两 边 的 操作 数 ， 返 回 一 个 布尔 值 ， 结 果 为 真 时 返回 true， 结 果 


他 
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为 假 时 返回 false。 常 用 的 比较 运算 符 如 表 13.4 所 示 。 
表 13.4 常用 的 比较 运算 符 
运算 符 说 明 示例 

当 左 边 操作 数 大 于 右边 操作 数 时 返回 trwe， 否 则 返回 4>3 返回 tue，5>6 返回 false 

当 左 边 操作 数 小 于 右边 操作 数 时 返回 tue， 否 则 返回 false 4<5 返回 true，5<1 返回 false 
当 左 边 操作 数 大 于 等 于 右边 操作 数 时 返回 tue， 否 则 返回 false 4>=4 返回 tme，4>=5 返回 false 
当 左 边 操作 数 小 于 等 于 右边 操作 数 时 返回 tue， 否 则 返回 false 4<=4 返回 tme，4<=1 返回 false 
当 左 边 操作 数 等 于 右边 操作 数 时 返回 tue， 否 则 返回 false 5 一 5 返回 tue，5 一 6 返回 false 
当 左 边 操作 数 不 等 于 右边 操作 数 时 返回 tue， 否 则 返回 false 5!=8 返回 tue，5!=5 返回 false 


注意 : 区 分 比较 运算 符 “==” 与 赋值 运算 符 “=”。 
4. 逻辑 运算 符 
逻辑 运算 符 用 于 测定 变量 和 值 之 间 的 逻辑 ， 采 用 布尔 值 true 或 false 作为 操作 数 ， 其 返回 值 也 是 罗 
辑 值 。 常 用 的 逻辑 运算 符 如 表 13.5 所 示 ， 假 定 x=8 且 y=5。 
表 13.5 常用 的 逻辑 运算 符 


运算 符 说 明 
当 左 右 两 边 操作 数 均 为 true 时 返回 tue， 否 则 返回 false (x<10)&&(y>4) 返 回 true 


当 左右 两 边 操作 数 至 少 有 一 个 为 tmue 时 返回 tue， 否 则 返回 false (<=10)&&(y<2) 返 回 true 
当 操 作 数 为 tue 时 返回 false， 否 则 返回 tme !(x<10) 返 回 false 


5. 位 运算 符 

位 运算 符 包 括 位 逻辑 运算 符 和 位 移动 运算 符 。 位 逻辑 运算 符 有 3 种 : 廊 、| 和 ^。 位 移动 运算 符 有 3 
种 : >>、<< 和 >>>。 位 运算 符 在 编写 JavaScript 程序 时 不 太 常用 ， 此 处 不 做 详细 介绍 ， 需 要 时 可 参考 相 
关 手 册 。 


13.4.5 ”表达 式 


鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 13 章 \ 表 达 式 .wmv 
在 学 习 完 变量 和 运算 符 之 后 ， 表 达 式 的 概念 就 很 容易 理解 了 ， 其 实在 前 面 已 经 多 次 见 到 过 简单 的 
表达 式 。 表 达 式 是 变量 、 常 量 及 运算 符 的 集合 。 一 般 分 为 算术 表达 式 、 字 符 串 表达 式 、 赋 值 表达 式 ， 
注意 : 表达 式 的 种 类 是 多 种 多 样 的 ， 当 表达 式 中 包含 多 个 运算 符 时 ,运算 符 的 优先 级 就 显得 非常 重 
要 Ts 


如 表 13.6 所 示 为 按 优先 级 从 高 到 低 列 出 的 JavaScript 运算 符 ， 具 有 相同 优先 级 的 运算 符 按 从 左 至 
右 的 顺序 求 值 。 
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表 13.6 JavaScript 运算 符 优先 级 


优 先 级 运 算 符 

1 ~[10 
2 + 一 、-、 一、! 
3 *、/、% 
4 +、-、+ (字符 串 串联 ) 
5 <<、 >>、 >>> 
6 Ky = > = 
7 多 〈 按 位 与 ) ^( 按 位 异 或 ) | ( 按 位 或 ) 
8 && (逻辑 与 ) | (逻辑 或 ) 
9 ?:〈 条 件 运算 符 ) 
10 三 《赋值 运算 符 ) 
11 ，〈 多 重 求 值 ) 

来 看 一 个 表达 式 的 例子 ， 例 如 : 

y=2008*(55+6+23); 

在 该 表达 式 中 有 5 个 运算 符 : =、* 、0、+、+。 按 照 表 13.6 的 优先 级 规则 从 高 到 低 应 为 : 0、+、 

所 三 


13.5 流程 控制 


程序 并 不 都 是 按部就班 地 执行 ， 这 就 需要 控制 结构 来 进行 流程 控制 。 日 常生 活 中 经 常会 根据 不 同 
的 情况 做 不 同 的 决定 。 例 如 ， 下 雨 就 待 在 家 里 看 奥运 直播 ， 或 者 不 下 雨 就 跟 朋 友 出 去 逛街 ， 不 同 条 件 
下 触发 不 同 的 流程 结果 。 再 如 ， 在 工厂 中 ， 控 制程 序 控制 机 器 不 停 地 组 装 汽车 零件 ， 这 些 情 况 的 处 
理 就 离 不 开 流程 控制 。JavaScript 常用 的 程序 流程 有 3 种 结构 : 顺序 结构 、 选 择 结构 和 循环 结构 。 


13.5.1 ”顺序 结构 


鳃 ml 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \ 顺 序 结构 .wmv 
顺序 结构 是 最 基本 的 控制 结构 ， 任 何 一 个 程序 都 离 不 开 ， 是 程序 按照 自 上 而 下 的 顺序 逐 行 执行 。 


例如 : 
var x=2008; 
alert(x); // 弹 出 一 个 对 话 框 显示 变量 x 的 值 
此 例子 就 是 典型 的 顺序 结构 ， 浏 览 器 先 初始 化 变量 x， 并 为 其 赋值 2008。 然 后 再 执行 下 一 行 ， 弹 


出 一 个 对 话 框 来 显示 x 的 值 。 


他 
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13.5.2 ”选择 结构 


贸 il 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 13 章 \ 选 择 结构 .wmv 
比较 常用 的 选择 结构 有 过 结 构 、 寺 .else 结构 和 switch 结构 。 选择 结构 就 是 像 “ 如 果 不 是 …… 那 么 
将 ……” 这 样 形式 的 结构 。 
1. if 结 构 
结构 的 格式 写法 是 : 
i 条 件 语句 ) 
{ 
语句 
} 
当 条 件 语 句 的 返回 结果 是 true 时 ， 则 程序 执行 大 括号 中 的 语句 ， 然 后 顺序 执行 后 面 的 其 他 程序 。 
如 果 条 件 语句 返回 false， 则 程序 不 执行 大 括号 中 的 语句 ， 而 直接 执行 后 面 的 其 他 程序 。 例 如 : 


var y=10; 
if(y>9) 


人 
alert(y); 
} 


上 面 的 程序 中 ， 当 条 件 语句 y 值 大 于 9 时 ， 语 句 返 回 值 为 tue， 那 么 这 个 程序 将 执行 alert(y)。 


注意 : 虽然 上 面 的 过 从 句 只 有 一 条 语句 ， 但 建议 不 要 省 略 大 括号 对 。 这 样 做 易 读 、 易 维护 。 程 序 员 平时 
应 养 成 良好 的 习惯 。 


2. if...else 结构 
站 ...else 的 格式 是 : 
if( 条 件 语句 ) 

上 语句 1 


这 种 结构 是 当 条 件 语句 为 tue 时 ， 程 序 执行 语句 1; 而 条 件 语句 为 false 时 ， 程 序 执行 语句 2。 
例如 : 


var y=2008; 
if(y==2008) 


{ 
alert(" 奥 运 年 "); 
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} 


else 


{ 
alert(" 年 年 有 余 "); 
b 


如 果 y 的 值 等 于 2008， 则 弹出 对 话 框 显示 “奥运 年 ”， 否 则 弹出 对 话 框 显 示 “ 年 年 有 余 ”。 


另外 ， 让 语句 可 以 嵌 套 使 用 。 
3. switch 结构 


对 于 条 件 语句 拥有 多 个 值 时 ， 使 用 switch 语句 就 会 显得 得 心 应 手 。 其 语句 的 格式 是 : 


switch( 表 达 式 ) 


{ 

case 取 值 1: 
语句 1 
break; 

case 取 值 2: 
语句 2 
break; 

case 取 值 3: 
语句 3 
break; 


case 取 值 n: 
语句 n 
break; 

default: 

语句 n+1 

break; 


b 


程序 根据 switch 表达 式 的 结果 来 与 case 后 面 的 值 进行 匹配 。 


碰 到 break 语句 为 止 。default 语句 是 可 选 的 ， 只 有 上 面 的 值 都 不 
switch(month) 
{ 


case February: 
alert("28 天 "); 
break:; 

case April: 

case June: 

case September: 

case November: 
alert("30 天 "); 
break; 

default: 
alert("31 天 "); 
break; 


由 
@ 


如 果 与 n 匹配， 则 执行 语句 n， 直 到 


匹配 时 ， 才 执行 语句 n+1。 例 如 : 
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上 述 例子 中 如 果 月 份 (month) 等 于 February 则 弹出 对 话 框 显示 “28 天 ”; 如 果 是 April、June、 

September 或 者 November 中 的 任意 一 个 ， 则 弹出 对 话 框 显示 “30 天 ”; 其 他 月 份 弹出 对 话 框 显示 
Sa 
注意 : month 的 值 只 能 是 整 型 或 者 字符 囊 ， 不 能 是 实 型 。 

为 了 完全 理解 上 面 的 代码 ， 此 处 需要 说 明 一 下 break 语句 的 用 法 。break 语句 可 以 终止 循环 体 中 的 
执行 语句 和 switch 语句 。 一 般 来 说 ， 循 环 条 件 为 false 时 ,循环 才 结束 。 如 果 提 前 中 断 循环 ， 可 以 在 循 
环 体 语句 中 添加 break 语句 。 除 了 break， 还 有 continue 语句 来 中 断 循环 ， 不 过 continue 只 是 跳 过 本 次 
循环 要 执行 的 剩余 语句 ， 继 续 执行 下 一 次 循环 。 要 注意 break 和 continue 的 区 别 。 


13.5.3 ”循环 结构 
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循环 结构 一 般 有 while 结构 、do...while 结构 和 for 结构 。 它 们 都 是 表示 一 个 动作 完成 之 后 ， 继 续 
重复 上 一 个 动作 。 


1. while 结构 

该 结构 的 格式 是 : 

while( 条 件 表达 式 ) 

{ 

语句 

} 

当 条 件 表达 式 的 返回 值 为 tue 时 ， 就 执行 大 括号 中 的 语句 。 当 条 件 表达 式 的 返回 值 为 false 时 ， 就 
跳出 循环 ， 执 行 后 面 的 语句 。 例 如 : 


var i=0; 
while(i<10) 


{ 
alert(" 我 在 循环 中 "+i); 
i 


} 


上 述 代 码 中 ，i 从 0 增加 到 9， 每 次 都 弹出 对 话 框 ， 当 二 10 时 ， 条 件 表达 式 i<10 为 false， 则 跳出 
循环 ， 执 行 while 循环 后 面 的 代码 。 


2. do...while 结构 
do...while 的 格式 是 : 


do 


语句 
}while( 条 件 表达 式 ); 
其 结构 与 while 结构 的 不 同 之 处 在 于 ，do...while 是 先 执行 大 括号 中 的 语句 ， 再 检查 条 件 表达 式 的 


® 


而 
alert(" 我 在 循环 中 "+i); 
+; 


} while(i<10) 


此 例子 在 执行 时 会 弹出 11 次 对 话 框 ， 可 以 与 while 结构 中 的 例子 做 一 下 对 比 ， 便 于 理解 二 者 的 
不 同 。 

3. for 结构 

最 常用 的 循环 是 for 循环 ， 在 学 习 其 用 法 之 后 ， 可 与 其 他 循环 结构 对 比 ， 根 据 个 人 习惯 选择 使 用 哪 
种 。for 循环 语句 的 格式 是 : 


for( 初 始 值 ;循环 条 件 ;更 新 值 ) 
{ 
语句 
J 
通过 for 循环 结构 的 用 法 ， 可 以 实现 同 while 循环 同样 的 作用 。 如 以 下 的 代码 ， 它 的 效果 是 和 前 面 
while 例子 一 样 的 。 
for(var i=0;i<10;i++) 
人 
alert(" 我 在 循环 中 "+i); 
} 
注意 : for 关 键 字 后 面 的 小 括号 中 是 用 两 个 分 号 “;”, 而 不 是 过 号 “,”。 初学 者 比较 容易 忽略 这 个 问题 。 
在 刚刚 开始 编写 JavaScript 代 码 时 稍 加 注意 即 可 。 
如 果 修 改 while 结构 中 的 代码 。 例 如 : 


var i=0; 
while(i<10) 


{ 
alert(" 我 在 循环 中 "+i); 
break; 
| 
} 
此 时 因为 在 循环 结构 中 加 了 break 语句 ， 循 环 只 会 执行 一 次 ， 即 弹出 一 次 对 话 框 之 后 ， 循 环 中 断 ， 
继续 执行 for 循环 后 面 的 语句 。 再 将 代码 改 为 : 


var i=0; 
while(i<10) /iwhile 循环 


{ 
alert(" 我 在 循环 中 "+i); 
continue; 1/ 跳出 本 次 循环 


Bs 


© 
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) 
注意 : 这 是 一 个 无 效 的 错误 循环 。 


此 时 又 是 另外 一 种 效果 ， 执 行程 序 时 代码 会 弹出 无 数 次 对 话 框 。 事 实 上 此 程序 已 成 为 一 个 无 限 循 
环 ， 即 死 循环 。 因 为 每 次 执行 到 continue 语句 时 就 跳出 本 次 循环 ，i 的 值 没有 改变 ， 继 续 调 入 下 次 循 
环 ， 这 样 的 结果 是 i 始终 为 0，i<10 始终 为 true。 熟 练 掌握 break 和 continue 这 两 个 语句 对 于 以 后 编程 
很 有 用 。 


13.6 了 解 函 数 
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在 编写 程序 时 ， 经 常 有 几 处 或 者 更 多 地 方 需要 相同 的 功能 。 如 果 在 每 一 处 均 写 相同 的 代码 ， 这 将 
使 得 程序 显得 宛 余 。 例 如 ， 在 写 射击 类 游戏 程序 时 ， 最 常用 的 一 段 代码 就 是 发 射 子 弹 ， 在 这 样 一 个 程 
序 中 ， 需 要 发 射 子 弹 代码 的 地 方 多 则 有 几 十 处 甚至 上 百 处 。 

如 果 在 每 次 都 写 一 段 发 射 子弹 的 程序 ， 显 然 需要 重复 编写 大 量 的 代码 ， 费 时 费力 达到 相同 的 效果 
也 无 可 非议 。 但 是 当 用 户 要 求 改变 发 射 子弹 的 时 间 间 隔 时 ， 就 会 觉察 到 这 样 做 的 缺点 。 设 计 者 不 得 不 
一 处 接 一 处 地 修改 ， 稍 不 注意 疏漏 一 处 ， 不 得 不 重新 检查 ， 这 就 是 恶性 循环 。 

而 如 果 将 发 射 子弹 的 代码 独立 作为 一 个 函数 ， 每 次 使 用 时 直接 调用 即 可 ， 不 仅 节省 了 大 量 代码 ， 
而 且 只 要 在 需要 修改 时 修改 一 处 即 可 。 所 以 函数 可 以 令 程序 易 编写 、 易 读 、 易 维护 ， 一 举 三 得 。 通 常 
情况 下 ， 函 数 的 语法 格式 写 为 : 


function 函数 名 ([ 参 数 1][, 参 数 2].…[, 参 数 ]) 


语句 
[return 表达 式 ;] 
} 
其 中 ，function 是 定义 函数 的 必须 关键 字 。 函 数 名 的 定义 与 前 面 讲 的 变量 定义 一 样 。 小 括号 中 的 参 
数 其 实 就 是 变量 ， 各 个 变量 之 间 用 逗号 (,) 隔 开 ， 是 为 了 接收 调用 程序 传递 进来 的 参数 。 当 函数 不 需 
要 接收 任何 参数 时 ， 小 括号 中 什么 也 不 写 ， 但 不 能 省 略 小 括号 。 
如 果 调 用 程序 需要 返回 一 个 结果 时 ， 则 在 定义 时 要 加 retum 语句 ， 返 回 结果 。 下 面 通过 例子 来 说 
明 如 何 定义 函数 和 如 何 调用 函数 ， 如 实例 13-3 所 示 为 一 个 简单 的 函数 调用 示例 。 
【实例 13-3】 本 实例 介绍 简单 的 函数 定义 和 调用 。 


实例 13-3: 简单 的 函数 定义 和 调用 
源码 路 径 : 光盘 \ 源 文件 \13\13-3.html 


1 <scriptlanguage="JavaScript"> 

2 var msg=" 全 局 变量 "; 

3 function maxValue(a,b) 1 定义 函数 
这 { 

5 var max=-10000; 

6 if(a<b) 


轴 { 

8 max=b; 
9 » 

10 else 

kl { 

12 max=a; 
13 } 

14 return max; 
15 . 

16 function checkVar() /定义 函数 
17 


18 var msg=" 局 部 变量 "; 
19 alert(msg); 


20  } 

21 

22 var max; 

px} alert("max="+maxValue(23,48)); /调用 函数 


24 /icheckVar(); 
25 alert(msg); 


26 </script> 
【运行 程序 】 上 述 代码 运行 的 效果 如 图 13.5 所 示 。 单 击 “ 确 定 ” 按 钮 后 的 效果 如 图 13.6 所 示 。 
【深入 学 习 】 在 上 面 的 代码 中 ,定义 了 两 个 函数 maxValue0 和 checkVar0， 前 者 是 一 个 有 参数 和 返 

可 结果 的 函数 ， 通 过 接收 调用 函数 传递 入 的 两 个 值 ， 求 出 最 大 值 ， 然 后 将 结果 返回 给 调用 函数 。 如 

图 13.5 所 示 ， 图 中 的 “48” 正 是 函数 maxValue0 的 返回 结果 。 而 checkVar0 是 一 个 没有 参数 、 没 有 返 

可 结果 的 函数 ， 用 来 显示 全 局 变量 和 局 部 变量 的 不 同 。 

注意 : 全 局 变量 是 在 所 有 函数 之 外 定义 的 变量 ， 其 作用 域 是 <script> 标 签 之 间 的 所 有 代码 ， 而 局 部 变量 
是 定义 在 函数 之 内 的 变量 ， 其 只 在 所 在 函数 中 有 效 。 如 图 13.6 所 示 ， 运 行 结果 是 显示 全 局 变量 ， 

而 不 是 局 部 变量 。 当 将 程序 13.3 中 第 24 行 去 掉 注 释 “//”， 同 时 删除 第 25 行 。 此 时 程序 调用 局 部 
变量 所 在 的 函数 ， 运 行 效果 如 图 13.7 所 示 。 


己 ] 梧 | TT 


a | (HOBrwemecs po- 
(OD rasmrmucsste 2 + x| al 一 三 -- i 


图 13.5 ”函数 定义 和 调用 演示 1 ”图 13.6 函数 定义 和 调用 演示 2 图 13.7 检查 局 部 变量 和 全 局 变量 的 作用 域 
另外 ， 由 图 13.6 和 图 13.7 对 比 可 以 知道 ， 浏 览 器 在 按 顺 序 解释 执行 嵌 在 网 页 中 的 脚本 时 ， 不 会 自 
动 解释 执行 位 于 函数 中 的 程序 代码 。 只 有 当 程序 调用 函数 时 ， 函 数 中 的 代码 才 会 执行 。 
注意 : 准确 区 分 “全 局 变量 ”和 “局 部 变量 ”的 概念 ， 避 免 在 编写 程序 时 因为 混 清 全 局 变量 和 局 部 变 
量 而 导致 程序 运行 结果 不 正确 。 


@ 
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在 编写 JavaScript 时 并 不 是 所 有 的 函数 都 必须 自己 写 ，JavaScript 的 开发 者 在 设计 时 已 经 提供 了 一 
些 系统 函数 供 JavaScript 程序 员 来 使 用 。 常 用 的 JavaScript 系统 函数 如 表 13.7 所 示 。 


表 13.7 常用 的 JavaScript 系统 函数 


类 别 | 函数 说 明 示例 
编码 返回 一 个 URI 字符 串 encodeURI( "http://www.sina.com/ 天 气 " ) 的 结果 为 
处 理 编码 后 的 结果 http://www.sina.cony%E5%A4%A9%E6%BO%94 


将 已 编码 的 URI 字符 串 解码 |decodeURI("http://www.sina.com/%E5%A4%A9%E6%B0%94") 的 
成 原始 的 字符 串 返回 结果 为 http://www.sina.com/ 天 气 

将 一 个 字符 串 指定 的 进 制 转 |parseInt("2008".10):: 将 字符 串 "2008" 转 换 为 十 进 制 ， 结 果 为 2008 
parseInt("11".8):: 将 字符 串 "10" 转 换 为 八进制 结果 为 9 


数值 将 一 个 字符 串 转 换 成 对 应 的 |parseFloat("6.6")+1 的 结果 为 7.6， 注 意 区 别 parseFloat("6.6"+1) 的 
函数 检测 前 两 个 方法 返回 值 是 否 
isNaN 为 非 数值 型 ， 如 果 是 ， 返 回 |isNaN(parseInt("Olympic2008")) 的 结果 为 tme 
true， 否 则 返回 false 


返回 一 个 字符 串 编 码 后 的 结 

字符 pa gi escape("Olym^_^pic") 的 结果 为 Olym%5E_%5Epic 
编码 的 Unicode 编码 的 十 六 进 制 数 
处 理 将 用 escape 方 法 编码 的 结果 字 
函数 符 串 编码 成 原始 字符 串 

将 某 个 参数 字符 串 作 为 一 个 

JavaScript 执行 


unescape("Olym%5E_%5Epic") 的 结果 为 Olym^_^pic 


eval 


13.7 案例 : 一 个 使 用 基本 语法 的 JavaScript 例子 
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在 日 常生 活 中 ， 对 于 上 班 时 间 比 较 灵活 的 单位 来 说 ， 如 何 能 够 及 时 、 准 确 地 令 公 司 员工 了 解 自 己 
的 上 班 时 间 是 一 个 刺 手 的 问题 。 公 司 的 管理 人 员 不 会 一 个 挨 一 个 地 打 电 话 通 知 ， 难 免 总 有 员工 会 弄 错 
自己 的 上 班 时 间 。 这 样 ， 可 以 求助 于 Web， 在 公司 的 主页 中 设计 一 个 员工 上 班 时 间 查 询 系 统 ， 那 么 公 
司 的 员工 就 可 以 通过 网 络 很 方便 地 查询 自己 的 工作 日 期 。 

要 开发 的 员工 上 班 时 间 查 询 系统 的 思路 是 : 在 员工 登录 到 查询 系统 页 面 后 ， 填 写 当天 是 星期 几 ， 
然后 通过 自己 的 员工 号 来 查询 个 人 的 上 班 时 间 ， 并 返回 该 员工 是 第 几 位 访客 。 在 这 个 例子 中 ， 程 序 要 
求 员工 号 必须 是 6 位 ， 且 每 一 位 都 是 数字 。 

按照 构思 的 需求 ， 设 计 一 个 简单 的 原型 系统 ， 并 不 会 包含 所 有 实际 需要 的 功能 ， 如 实例 13-4 中 展 
示 了 员工 上 班 时 间 查 询 系统 。 

【实例 13-4】 本 实例 介绍 员工 上 班 时 间 查 询 系统 的 创建 方法 。 


re 实例 13-4: 员工 上 班 时 间 查 询 系统 的 创建 方法 
源码 路 径 : 光盘 \ 源 文件 \13\13-4.html 


HTML+CSS 网 页 设计 详解 

1 <html> 

2 <head> 

3 <title> 员 工 查询 系统 </title> 

4 </head> 

5 <script language="javascript"> 

6 var sum=0; 

function dosubmit(frm) /检查 员工 号 是 否 为 6 位 ， 是 否 全 是 数字 
8 { 

9 if(frm.num.value.length!=6) 

10 

yi | alert(" 员 工 号 必须 是 6 位 "); 

12 return false; // 如 果 不 是 6 位 ， 则 返回 错误 
13 } 

14 else 

15: { 

16 var num_value=frm.num.value; 

这 for(var i=0;i<num_value.length;i++) 

18 

19 if(num_value.charAt(i)<'0'||Inum_value.charAt(i)>'9') 
20 { 

21 alert(" 员 工 号 只 能 是 数字 "); 

22 return false; 

23 } 

24 } 

25 } 

26 return true; /lalert(" 输 入 正确 ") 
27 } 

28 /返回 星期 几 的 上 班 时 间 ， 周 一 至 周 五 返回 "上 班 时 间 : 9:00-17:30"， 周 六 周 日 
29 返回 "周末 休息 "*/ 

30 function checkDay() 

31 { 

32 switch(parselnt(form1.day.value)) 

33 { 

34 case 1: 

35 case 2: 

36 case 3: 

37 case 4: 

38 case 5: 

39 alert(" 上 班 时 间 : 9:00-17:30"); 

40 break' 

41 

42 default: 

43 alert(" 周 末 休息 "); 

44 break; 

45 下 

46 Sum+=1; 

47 alert(" 您 是 第 "+sum+" 位 访客 "); // 返 回 该 员工 是 第 几 位 访客 
48 } 

49 </script> 

50 <body> 

51 <center> 


52 <h1> 员 工 查询 系统 </h1> 


53 </center> 

54 <form name=form1 action="javascript:checkDay()" method=post onsubmit="return 
55 dosubmit(this)"> 

56 星期 : <input type=text name=day><br> 

57 员工 号 : <input type=text name=num ><br> 

58 <input type=submit name=submit1 value=" 递 交 "> 

59 </form> 

60 </body> 

61 </html> 


注意 : 本 例 旨 在 让 读者 体会 JavaScript 一 些 基本 语法 的 用 法 。alert、form 对 象 ， 以 及 一 些 事件 的 用 法 将 
在 后 面 的 章节 中 详细 介绍 。 读 者 要 特别 注意 HTMLIL 不 区 分 大 小 写 ， 而 谋 在 其 中 的 JavaScript 却 是 
严格 区 分 大 小 写 的 ， 一 旦 混 消 ， 将 给 开发 带 来 不 必要 的 麻烦 。 

【运行 程序 】 运 行 上 述 代码 ， 当 输入 “日 期 =1 ”和 “员工 号 =123” 时 ， 单 击 “ 递 交 ” 按 钮 ， 运 行 
效果 如 图 13.8 所 示 。 
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图 13.8 员工 号 不 是 6 位 的 运行 结果 


【深入 学 习 】 单 击 “ 确 定 ” 按 钮 ， 重 新 输入 日 期 为 1 和 员工 号 为 12345d 时 ， 单 击 “ 递 交 ” 按 钮 ， 
运行 效果 如 图 13.9 所 示 。 在 图 13.9 的 对 话 框 中 单 击 “ 确 定 ” 按 钮 ， 再 重新 输入 星期 为 2， 员 工 号 为 
123456， 单 击 “ 递 交 ” 按 钮 ， 运 行 效果 如 图 13.10 所 示 。 
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13.9 员工 号 并 非 全 是 数字 时 运行 结果 图 13.10 员工 号 输入 正确 时 运行 结果 
单 击 “ 确 定 ”按钮 ， 弹 出 的 对 话 框 如 图 13.11 所 示 。 
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图 13.11 返回 员工 是 第 几 位 访客 


经 过 上 述 演示 ，JavaScript 的 特效 更 进一步 地 显现 出 来 了 。 在 实例 13-4 中 涉及 了 变量 、 基 本 数据 类 
型 、 数 据 类 型 的 转换 方法 、 运 算 符 、 表 达 式 、 流 程控 制 站 结构 、for 结构 ) ， 以 及 函数 的 用 法 。 笔 者 
建议 初学 者 参照 实例 自己 运行 一 下 , 结合 运行 结果 和 代码 更 进一步 地 体会 JavaScript 基本 语法 的 定义 和 
使 用 。 


13.8 小 


通过 本 章 的 学 习 ， 读 者 对 基本 的 程序 语法 有 了 简单 的 概念 ， 也 许 目前 未 能 很 好 地 体会 这 些 语法 究 
竞 能 做 什么 ， 不 过 了 解 这 些 基础 会 对 今后 的 学 习 有 更 好 的 帮助 。 本章 是 JavaSeript 的 入 门 部 分 ， 主 要 的 
学 习 内 容 有 : 


脚本 语言 的 概念 、VBScript 和 JavaScript 的 概念 并 通过 实例 初步 体会 脚本 语言 的 魅力 。JavaScript 
很 容易 使 人 望 文生 义 ， 不 自觉 地 就 与 Java 联系 ， 但 是 JavaScript 与 Java 有 着 很 大 的 不 同 ， 区 
分 这 两 个 概念 可 以 使 初学 者 避免 一 些 错误 。 


JavaScript 基本 语法 ， 这 部 分 是 本 章 的 主要 内 容 ， 包 括 标识 符 、 基 本 数据 类 型 、 运 算 符 、 表 达 式 、 
流程 控制 以 及 函数 。 通 过 简单 的 几 行 代码 来 分 别 介绍 每 项 来 帮助 初学 者 入 门 。 


一 个 案例 一 一 员工 工作 时 间 查 询 系统 , 将 本 章 讲述 的 基本 语法 集中 在 此 例 中 , 展示 JavaScript 基本 
语法 的 用 法 。 


13.9 本 章 习题 

习题 13-1 JavaScript 的 基本 数据 类 型 有 几 种 ? 

【分 析 】JavaScript 数据 类 型 包括 基本 数据 类 型 和 内 置 数据 类 型 。 基 本 数据 类 型 一 般 包 括 5 种 : 整 
型 、 实 型 、 字 符 串 型 、 布 尔 型 和 空 值 。 

习题 13-2 ”JavaScript 中 的 标识 符 有 哪些 要 求 ? 


【分 析 】JavaScript 中 的 标识 符 是 指 JavaScript 中 定义 的 符号 ， 必 须 以 字母 、 下 划 线 (_) 或 美元 符 
号 ($) 开始 ， 而 且 不 能 是 JavaScript 中 的 保留 关键 字 且 不 能 包含 空格 。 


习题 13-3 ”在 页 面 编写 一 段 JavaScript 代码 ， 当 单 击 页 面 中 的 按钮 时 ， 弹 出 “欢迎 光临 ”的 对 话 


第 13 章 在 网页 中 加 入 神奇 习 呈 ee 


框 ， 效 果 如 图 13.12 所 示 。 
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图 13.12 JavaScript 实例 


【分 析 】 本 题 主要 考查 读者 对 JavaScript 函数 的 理解 。 
【关键 代码 】 


<script language="JavaScript"> 
function button1() 


{ 
alert(" 欢 迎 光临 "); 
} 
</script> 
习题 13-4 ”在 页 面 编写 一 段 JavaScript 代码 ， 创 建 一 个 包含 5 次 循环 的 循环 结构 ， 并 且 每 循环 一 
次 ， 弹 出 对 话 框 显示 “这 是 第 * 次 循环 ”。 例 如 ， 第 5 次 循环 就 弹出 “这 是 第 5 次 循环 ”， 效 果 如 
图 13.13 所 示 。 
【分 析 】 本 题 主 要 考查 读者 对 for 循环 的 掌握 程度 。 
【关键 代码 】 


for(var i=1;i<=5;i++) 


{ 
alert(" 这 是 第 "+i+" 次 循环 "); 
} 


习题 13-5 ”使 用 JavaScript 代码 创建 一 个 选择 结构 ， 给 n 赋值 20， 然 后 判断 如 果 n 大 于 22， 则 弹 
出 的 对 话 框 中 提示 n>22， 否 则 提示 n<22， 效 果 如 图 13.14 所 示 。 
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图 13.13 循环 结构 图 13.14 选择 结构 
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【分 析 】 本 题 主 要 考查 读者 对 过 .else 选择 结构 的 掌握 程度 。 
【关键 代码 】 


var N=20; 
if(n>22X 
alert("n>22"); 
出 
else{ 
(n<22"); 
由 
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将 JavaScript 引入 HTML 的 目的 在 于 实现 客户 与 浏览 器 之 间 的 动态 交互 , 第 13 章 中 已 经 初步 体验 
到 了 其 效果 。JavaScript 是 基于 对 象 的 脚本 语言 ， 即 所 有 的 编程 均 以 对 象 为 出 发 点 。 把 JavaScript 中 的 
元 素 划分 给 大 大 小 小 的 对 象 ， 对 象 中 仍然 包含 对 象 。 本 章 通过 学 习 ， 进 一 步 体 验 JavaScript 的 特效 。 例 
如 ， 在 描述 银行 系统 时 ， 银 行 员工 具有 名 字 、 职 位 、 考 核 成 绩 等 属性 ， 同 时 还 包括 员工 可 以 执行 的 存 
款 、 核 算 、 打 印 单据 等 操作 ， 在 设计 网 页 时 ， 要 访问 每 一 个 员工 的 属性 和 操作 该 怎么 实现 呢 ? 这 一 章 
将 详细 阑 述 。 本 章 的 主要 知识 点 如 下 。 

了 解 对 象 和 DOM 的 概念 。 

了 解 JavaScript 中 的 一 个 重要 数据 结构 一 一 数组 。 

了 解 JavaScript 中 常用 的 内 部 对 象 。 

了 解 window 对 象 的 属性 、 方 法 和 事件 。 

了 解 document 对 象 的 属性 、 方 法 和 事件 。 

掌握 用 JavaScript 实现 动态 页 面 。 


14.1 了 解 一 下 何 为 “对 象 ” 


“对 象 ”这 个 词 相信 读者 都 不 陌生 ， 在 很 多 计算 机 语言 里 都 有 这 个 概念 ， 所 以 才 称 这 些 编程 语言 
为 面向 对 象 的 ， 表 示 这 是 一 类 事物 。 在 生活 中 ， 如 果 你 是 一 个 销售 商 ， 要 把 产品 卖 给 客户 ， 那 么 客户 
就 是 你 的 销售 对 象 ， 其 实 这 与 编程 语言 中 的 “对 象 ” 颇 为 相似 。JavaScript 中 的 对 象 是 指 JavaScript 这 
门 语言 所 服务 的 一 类 事物 。 


14.1.1 JavaScript 对 象 概述 


僵 M 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 14 章 \JavaScript 对 象 概述 .wmv 

JavaScript 中 的 对 象 与 面向 对 象 编程 语言 中 的 类 的 概念 相似 ， 是 对 一 类 事物 的 描述 。 但 是 与 面向 对 
象 的 编程 语言 不 同 的 是 ，JavaScript 对 象 没有 抽象 、 继 承 和 重 载 等 功能 。JavaScript 中 的 对 象 一 般 包 括 
属性 和 方法 两 个 基本 元 素 。 对 象 的 属性 是 反映 对 象 某 些 特定 性 质 的 ， 是 信息 的 装载 单位 ， 可 以 理解 为 
变量 。 例如， 窗口 的 大 小 、 文 字 的 颜色 等 。 而 对 象 的 方法 是 表示 对 象 可 以 执行 的 操作 ， 这 些 操作 能 够 
按照 设计 者 的 意图 被 执行 ， 可 以 理解 为 函数 。 例 如 ， 提 交 表单 、 单 击 时 的 处 理 函 数 等 。 

对 象 是 一 个 抽象 的 概念 ， 将 其 具体 化 之 后 就 是 对 象 实 例 ， 也 就 是 说 ， 对 象 与 对 象 实 例 是 一 般 与 具 
体 的 关系 。 例 如 ，“ 汽 车 ”表示 一 类 有 发 动机 、 四 轮 的 事物 ， 是 一 个 对 象 ， 而 “奥迪 A8” 表 示 一 种 特 
定型 号 的 汽车 ， 是 一 个 对 象 实例 。 

那么 对 象 和 对 象 实例 是 怎么 联系 的 呢 ? 答案 是 构造 函数 。 构 造 函数 是 用 来 创建 对 象 实例 的 函数 。 
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在 定义 对 象 时 可 以 自己 定义 构造 函数 ， 如 果 没 有 定义 ， 解 释 器 会 默认 定义 一 个 构造 函数 。 如 以 下 代码 : 
var objectlnstance=new objectName([ 参 数列 表 ]) ; 


其 中 ，objectInstance 表示 将 要 创建 的 对 象 实例 的 名 字 ，objectName 则 是 对 象 名 字 ， 参 数列 表 是 创 
建 对 象 实例 时 传递 的 参数 ，[] 表 示 可 以 选择 ， 参 数 的 个 数 是 0 个 或 多 个 。 

当 创 建 了 对 象 实例 之 后 ， 就 可 以 访问 对 象 实例 的 属性 和 方法 。 最 常用 的 访问 方式 是 在 对 象 实例 后 
面 加 上 一 个 点 (.〉 和 一 个 成 员 名 (属性 或 者 方法 ) 。 如 果 对 象 实例 后 面 跟 的 成 员 名 没有 定义 过 ， 浏 览 
器 执行 时 为 这 个 对 象 实例 新 增 一 个 成 员 。 这 就 是 JavaScript 的 特殊 之 处 , 可 以 无 限 地 为 对 象 实例 添加 新 
成 员 。 
注意 : 在 访问 对 象 实例 属性 时 可 以 采用 “对 象 实例 名 [属性 名 字符 串 ]” 格 式 ， 这 种 格式 可 以 实现 对 对 象 

属性 动态 访问 的 效果 。 如 实例 14-11 中 的 定义 及 访问 对 象 程序 。 


【实例 14-1】 本 实例 是 一 个 定义 及 访问 对 象 的 程序 。 


”实例 14-1: 定义 及 访问 对 象 
源码 路 径 : 光盘 \ 源 文件 \14\14-1.html 


1 <scriptlanguage="javascript"> 

2 function Employee() /定义 构造 函数 

1 

二 

5 varemployee=new Employee(); /初始化 对 象 实例 employee 

6 employee.name="LiMIng"; /| 给 employee 新 增 一 个 成 员 变量 name 
7 employee.id="031256"; // 给 employee 新 增 一 个 成 员 变 量 id 
8 function query() 

9 

10 alert(employee.name+"->"+employee.id); 

i 

12 employee.queryInfo=query; /| 给 employee 新 增 一 个 方法 

13 employee.querylnfo(); 

14 </script> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 14.1 所 示 。 
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【深入 学 习 】 实 例 14-1 实现 的 内 容 是 : 
(1) 定义 一 个 构造 函数 Employee0， 这 一 步 相当 于 定义 好 了 对 象 。 
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(2) 使 用 new 关键 字 创 建 对 象 实例 employee。 
(3) 为 对 象 实例 employee 添加 两 个 属性 : name 和 id， 并 添加 一 个 方法 query0。 
(4) 调用 对 象 实例 employee 的 方法 。 
由 图 14.1 可 以 看 到 ， 浏 览 器 在 解释 该 段 程序 时 调用 了 queryInfo0 方 法 ， 这 就 表明 成 功 地 定义 和 访 
问 了 对 象 。 


14.1.2 DOM 介绍 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 14 章 \DOM 介绍 .wmv 

在 JavaScript 中 有 许多 对 象 , 设计 者 通过 怎样 的 方式 来 组 织 这 些 对 象 呢 ?这 就 需要 了 解 一 个 新 概 
念 一 一 DOM。 

DOM (Document Object Model， 文 档 对 象 模型 ) 是 W3C 的 标准 ， 其 功能 是 把 浏览 器 支持 的 文档 
(包括 HIML、XML 和 XHTML) 当 作 一 个 对 象 来 解析 。DOM 实际 上 是 一 个 操作 文档 里 面 所 包含 内 
容 的 一 个 编程 API， 人 允许 开发 人 员 从 文档 中 读 取 、 搜 索 、 修 改 、 增 加 和 删除 数据 。 


说 明 : DOM 是 与 平台 和 语言 无 关 的， 只 要 是 支持 DOM 的 平台 和 编程 语言 ， 都 可 以 用 来 编写 文档 。 


DOM 里 面 有 专门 的 HTML 和 XML 的 对 象 模型 ， 用 它们 来 操作 文档 元 素 非常 方便 。DOM 可 以 视 
为 一 种 API 的 应 用 。 也 就 是 说 ， 将 文件 视 为 一 个 文件 对 象 ， 通 过 程序 语言 调用 DOM 对 象 ， 来 对 该 文 
件 的 某 些 特定 数据 进行 访问 操作 ,并 且 利 用 程序 将 获取 的 对 象 数据 做 更 进一步 的 应 用 。 可 以 利用 DOM 
方法 和 属性 ， 通 过 语言 (如 VBScript、JavaScript 和 ASP) 操作 XML 文件 。 

简单 地 说 ，DOM 是 指 对 象 及 对 象 之 间 的 层次 关系 。 可 以 通过 简单 的 举例 来 了 解 DOM 的 概念 。 如 
汽车 、 车 窗 和 玻璃 这 几 个 对 象 ， 玻 璃 附属 于 车 窗 ， 而 车 窗 附属 于 汽车 ， 类 似 如 此 ， 各 个 对 象 有 着 层次 
关系 。JavaScript 中 文档 对 象 的 结构 如 图 14.2 所 示 。 


navigator 浏览 器 对 象 
screen 屏 丰 对 象 
window 窗口 对 象 
© history 历史 对 象 
© location 地 址 对 象 
© franes[]; Frane 框架 对 象 
© docunent 文档 对 象 
anchors[]; links[]; Link 连接 对 象 
昌 applets[] Jave 小 程序 对 象 
enbeds[] 插件 对 象 
forns[]; Form 表单 对 象 
a Button 按钮 对 象 
四 Checkbox 复 选 框 对 象 
© elements[]; Element 表单 元 素 对 象 
Hidden 隐 疗 对 象 
Password 密码 输入 区 对 象 
a Radio 单 选 域 对 
Reset 重 置 按钮 对 象 
Select 选择 区 ( 下 拉 莱 单 、 列 表 ) 对 象 
options[]; Option 选择 项 对 象 
四 Submit 提交 按钮 对 象 
Text 文本 框 对 象 
a Textarea 多 行文 本 输入 区 对 象 
inages[]; Inage 图 片 对 象 


图 14.2 文档 对 象 结构 图 


注意 : 从 图 14.2 中 可 以 清楚 地 看 到 文档 对 象 中 各 对 象 之 间 的 并 列 关系 、 包 含 关系 , 从 而 可 以 知道 所 学 习 
对 象 的 位 置 。DOM 是 与 语言 无 关 的 API， 这 意味 着 其 实现 并 不 与 Java、JavaScript 或 者 其 他 语言 
绑 定 。 然 而 ， 鉴 于 本 书 的 目的 ， 接 下 来 主要 集中 在 JavaScript 的 实现 上 。 
@ 
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在 使 用 对 象 时 ， 常 常 涉及 事件 、 事 件 驱动 和 事件 处 理 这 3 个 概念 。 事 件 是 指 通过 单 击 标 或 者 散 击 
键盘 在 浏览 器 窗口 或 网 页 元 素 上 执行 操作 。 引 起 事件 的 原因 叫做 事件 源 。 例 如 ， 单 击 页 面 上 “提交 ” 
按钮 之 后 ， 就 产生 了 鼠标 单 击 事件 。 此 处 的 “提交 ”按钮 就 是 事件 源 。 事 件 处 理 是 对 象 化 编程 的 一 个 
很 重要 的 环节 ， 没 有 了 事件 处 理 ， 程 序 就 会 缺乏 灵活 性 。 事 件 的 处 理 程序 可 以 是 任意 JavaScript 语句 ， 
一 般 是 通过 程序 或 函数 对 事件 进行 处 理 。 
注意 : 图 14.2 中 有 些 对 象 是 全 小 写 的 ,有些 是 以 大 写字 母 开头 的 。 以 大 写字 母 开头 的 对 象 表示 直接 用 对 

象 的 名 字 (Id 或 Name ) ， 或 用 其 所 属 的 对 象 数 组 指定 。 


14.2 JavaScript 中 的 数组 


JavaScript 中 数组 是 最 常用 的 数据 结构 之 一 ， 是 用 一 个 变量 来 存储 一 组 数据 ， 是 一 组 数据 的 集合 。 
每 个 数据 是 数组 的 一 个 元 素 ， 每 一 个 数据 都 有 相应 的 索引 ， 因 为 数组 是 严格 有 序 的。 索引 号 以 0 开始 ， 
直到 数组 的 length-1。 为 了 存 取 数 组 中 的 任意 一 个 元 素 ， 需 要 采用 “数组 名 [索引 号 ]” 的 形式 。 与 其 他 
编程 语言 不 同 的 是 ， 同 一 个 JavaScript 数组 的 元 素 可 以 是 不 同 的 数据 类 型 。 

JavaScript 的 数组 属于 核心 语言 对 象 ， 而 不 是 文档 对 象 模型 。JavaScript 的 数组 大 小 不 要 求 确定 。 
将 数据 收集 到 数组 中 可 简化 数据 管理 。 例 如 ， 通 过 使 用 数组 ， 方 法 只 使 用 一 个 参数 就 可 以 将 一 组 名 称 
传递 给 函数 。 


14.2.1 定义 和 操作 数组 


铝 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 \ 定 义 和 操作 数组 ,wmv 

JavaScript 中 的 数组 定义 方法 一 般 有 3 种 ， 一 种 是 匿名 的 方式 ， 一 种 是 通过 new Array0， 另 一 种 是 
在 定义 时 直接 赋值 。 

匿名 方式 定义 的 格式 是 : 

var arrA=[]; 

通过 new Array0 定 义 的 格式 是 : 

var arrA=new Array(); 

上 面 这 两 种 定义 方式 的 效果 是 一 样 的 ， 就 是 分 配 存 储 空间 。 在 使 用 时 给 arrA 赋值 ， 例 如 : 

arrA[0]="2000"; 

arrA[1]= '2004"; 

arrA[2]= '2008"; 

此 外 ， 定 义 时 直接 赋值 的 写法 是 : 

arrA=[2000','2004',',20081]; 

在 访问 数组 中 的 元 素 时 采用 “数组 名 [索引 号 ]” 的 形式 。 

定义 数组 之 后 便 可 以 操作 数组 。 在 JavaScript 中 为 数组 定义 了 一 些 系 统 方法 , 可 以 方便 开发 者 实现 
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操作 程序 ， 可 以 说 这 些 方法 是 开发 者 非常 喜欢 使 用 的 。 对 于 初学 者 来 说 ， 这 些 方法 更 是 可 以 达到 事 半 
功 倍 的 效果 。 


shift0 方 法 

删除 原 数组 第 一 项 ， 并 返回 删除 元 素 的 值 。 如 果 数 组 为 室 ， 则 返回 undefined。 例 如 : 
var arrA = [1,2,3,4,5]; /定义 一 个 数组 ， 包 含 5 个 元 素 

var arrB = arrA.shift(); ll arrA=[2,3,4,5] arrB=1 
unshift() 方 法 


将 参数 添加 到 原 数组 开头 ， 并 返回 数组 的 长 度 。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.unshift(2008,2012); llarrA=[2008,2012,1,2,3,4,5] arrB=7 

pop0 方 法 

删除 原 数 组 最 后 一 项 ， 并 返回 删除 元 素 的 值 。 如 果 数 组 为 空 ， 则 返回 undefined。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.pop(); llarrA=[1,2,3,4] arrB=5 

push() 方 法 

将 参数 添加 到 原 数组 末尾 ， 并 返回 数组 的 长 度 。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.push(2008,2012); llarrA=[1,2,3,4,5,2008,2012] arrB=7 

concat0) 方 法 

返回 一 个 新 数组 ， 将 参数 添加 到 原 数 组 末尾 。 例 如 : 

var arrA = [1,2,3,4,5]; 

var arrB = arrA.concat(2008,2012,2016); llarrB=[1,2,3,4,5,2008,2012,2016] 

spice0 方 法 

该 方法 语法 为 “spice(start,Count,paral,para2,…);”， 表 示 从 start 开始 删除 Count 项 ， 并 从 该 位 置 起 
插入 paral 、para2 等 参数 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.spice(2,2,2008,2009,2010); 


var arrB=arrA.spice(0,1); // 此 时 运行 结果 同 shift() 方 法 一 样 
arrA.spice(0,0,-2,-1); var arrB=arrA.length; // 此 时 运行 结果 同 unshift() 方 法 一 样 
var arrB=arrA.spice(arrA.length-1,1); // 此 时 运行 结果 同 pop() 方 法 一 样 
arrA.spice(arrA.length,0,6,7);var arrB=arrA.length; // 此 时 运行 结果 同 push() 方 法 一 样 
TIeverse() 方 法 


将 数组 反 序 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.reverse(); llarrB=[5,4,3,2,1] 


ly 
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sort0 方 法 
对 数组 进行 排序 。 例 如 : 


var arrA = [6,2,8,3,5]; 
var arrB = arrA.sort(); llarrB=[2,3,5,6,8] 


slice0 方 法 
返回 从 原 数 组 中 指定 开始 下 标 到 结束 下 标 之 间 的 项 共同 组 成 的 新 数组 。 例 如 : 


var arrA = [1,2,3,4,5]; 
var arrB = arrA.slice(2,3); llarrB=3 


join0 方 法 

将 数组 的 元 素 组 成 一 个 字符 串 ， 以 参数 为 分 隔 符 ， 省 略 则 默认 用 逗号 为 分 隔 符 。 例 如 : 
var arrA = [1,2,3,4,5]; 

var arrB = arrA.join("->"); llarrB= "1->2->3->4->5"; 

下 面 来 展示 一 下 以 上 方法 在 页 面 中 实际 应 用 的 效果 ， 如 实例 14-2 所 示 。 

【实例 14-2】 本 实例 定义 了 多 个 不 同 的 数组 方法 。 


实例 14-2: 定义 多 个 不 同 的 数组 方法 及 访问 对 象 
源码 路 径 : 光盘 \ 源 文件 \14\14-2.html 


1 <scriptlanguage="javascript"> 

2 vararrA=[1,2,3,4,5]; // 定 义 一 个 数组 ， 包 含 5 个 元 素 

3 ”document.write(" 数 组 arrA=["+arrA+"]"+"<br>"); // 读 取 该 数组 

4 vararrB = arrA.shift(); // 删 除 原 数 组 第 一 项 

5 ”document.write("shift() 方 法 的 效果 :arrA=["+arrA+"], 删 除 的 元 素 : "+arrB+"<br>"); 

6 vararrC=arrA.unshift(2008,2012); /将 参数 添加 到 原 数 组 开头 

7 ”document.write("unshift() 方 法 的 效果 :arrA=["+arrA+"], 数 组 长 度 : "+arrC+"<br>"); 

8 vararrD = arrA.pop(); /删除 原 数 组 最 后 一 项 ， 并 返回 删除 元 素 的 值 
9 ”document.write("pop() 方 法 的 效果 :arrA=["+arrA+"], 删 除 的 元 素 : "+arrD+"<br>"); 

10 vararrE = arrA.push(2008,2012); /将 参数 添加 到 原 数 组 未 尾 ， 并 返回 数组 长 度 
11 document.write("push() 方 法 的 效果 :arrA=["+arrA+"], 数 组 长 度 : "+arrE+"<br>"); 

12 var arrF = arrA.concat(2008,2012,2016); 1 返回 一 个 新 数组 ， 将 参数 添加 到 原 数组 末尾 
13 ”document.write("concat() 方 法 的 效果 :arrF=["+arrF+"]"+"<br>"); 

14 

15 vararrT = [1,2,3,4,5]; /定义 一 个 数组 ， 包 含 5 个 元 素 

16 document.write("arrT=["+arrT+"]"+"<br>"); 

17 vararrG = arrT.reverse(); /将 数组 元 素 倒序 排列 

18 ”document.write("reverse() 方 法 的 效果 :arrG=["+arrG+"]"+"<br>"); 

19 vararrH = arrT.sort(); // 将 数组 排序 

20 ”document.write("sort() 方 法 的 效果 :arrH=["+arrH+"]"+"<br>"); 

21 var arrl = arrT.slice(2008,2009); 1/ 返回 从 原 数组 中 指定 开始 下 标 到 结束 下 标 
22 // 之 间 的 项 共同 组 成 的 新 数组 

23 ”document.write("slice() 方 法 的 效果 :arrl=["+arrl+"]"+"<br>"); 

24 var arrJ = arrT.join("->"); /将 数组 元 素 组 成 一 个 字符 串 ， 以 “->” 分 割 
25 ”document.write("join() 方 法 的 效果 :arrJ=["+arrJ+"]"+"<br>"); 

26 </script> 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 14.3 所 示 。 
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图 14.3 数组 方法 演示 结果 


说 明 : 通常 情况 下 ， 排 序 只 需要 使 用 sort() 方 法 即 可 。 删 除数 组 的 头 元 素 和 最 后 一 个 元 素 等 ， 使 用 数组 
的 系统 方法 即 可 。 


14.2.2 多维 数 组 


鳃 1 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 14 章 \ 多 维 数组 .wmv 

严格 地 说 ，JavaSeript 中 并 没有 多 维 数组 ， 然 而 这 种 数据 结构 是 非常 必要 的 。 在 开发 过 程 中 可 以 通 
过 数组 嵌 套 来 实现 ， 即 数组 元 素 本 身 又 是 数组 。 例 如 ， 管 理 一 组 奥运 志愿 者 的 信息 ， 小 组 中 包括 5 名 
志愿 者 ， 而 每 名 志愿 者 的 信息 包括 姓名 、 年 龄 、 籍 贯 、 学 校 、 所 属 小 组 和 编号 等 。 此 时 就 可 以 用 嵌 套 
数组 来 定义 。 格 式 如 下 : 


数组 变量 名 [ 子 数 组 索引 号 ][ 子 数组 中 的 元 素 索引 号 ] 
例如 : 
var arr=[["zhangsan",23,"031256"],["Lisi",22,"031266"],["Wangwu",21,"031245"]]; 


这 个 数组 中 包含 3 个 子 数组 ， 每 个 子 数组 描述 个 人 信息 ， 包 括 姓名 、 年 龄 和 编号 。 通 过 “arr[j] 

(i=0,1,2) ”来 访问 任何 一 个 子 数组 ， 而 通过 “arr[i]j] (ij=0,1.2) ”来 访问 子 数组 中 的 任何 一 个 元 素 。 

说 明 : 本 书 对 于 JavaScript 的 介绍 仅 是 泛泛 而 谈 ， 是 为 了 让 读者 更 好 地 从 HTML 语言 过 渡 到 JavaScript。 
如 果 读 者 希望 了 解 更 多 的 使 用 JavaSctipt 的 技巧 ， 需 要 查阅 相关 的 书籍 。 


14.3 内 部 对 象 


JavaScript 中 有 一 些 常用 的 内 部 对 象 也 叫 核心 对 象 ) ， 在 引用 某 些 对 象 的 属性 和 方法 时 不 需要 使 
用 new 关键 字 来 创建 对 象 实例 ， 而 是 可 以 直接 采用 “对 象 名 .成 员 ” 的 格式 来 访问 ， 这 样 的 对 象 叫 静态 
对 象 。 与 之 对 应 ， 需 要 用 new 关键 字 来 创建 对 象 实例 的 对 象 ， 称 为 动态 对 象 。 常 用 的 内 部 对 象 有 Math、 


Date 和 String 对 象 。 
@ 


14.3.1 Math 对 象 


鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 14 章 \Math 对 象 .wmv 
JavaScript 中 提供 了 一 些 数学 工具 ， 可 以 大 大 节省 开发 者 的 时 间 ， 而 无 须 将 精力 耗费 在 求 绝对 值 、 
平方 根 ， 以 及 三 角 函 数值 等 数学 处 理 上 。Math 对 象 与 JavaScript 中 的 其 他 对 象 不 同 ， 开 发 者 无 须 通过 
new 来 生成 对 象 实例 。Math 是 静态 对 象 ， 直 接 通 过 对 象 引用 相应 的 属性 和 方法 即 可 。 
注意 : Math 对 象 的 属性 通常 是 常数 ， 其 使 用 的 方法 很 多 ， 包 括 三 角 函 数 、 反 三 角 函 数 ， 还 有 一 些 预定 
义 的 数学 函数 。 


14.3.2 Date 对 象 


名 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 14 章 \Date 对 象 .wmv 

生活 中 ， 人 们 通过 月 历 、 年 历 等 方法 计算 “准确 的 某 年 某 月 某 日 ”。 在 JavaScript 中 ， 有 专门 的 一 
个 对 象 来 描述 日 期 和 时 间 。 这 个 对 象 是 Date 对 象 ， 它 的 日 期 和 时 间 是 按照 GMT〔 即 格林 威 治 时 间 》 
来 计量 的 。 在 计算 机 内 部 ， 日 期 和 时 间 是 一 个 整数 ， 是 从 1970 年 1 月 1 日 0 点 0 分 0 秒 起 相对 某 个 日 
期 和 时 间 以 毫秒 为 单位 的 数值 ， 通 过 这 个 数值 可 以 计算 出 其 相应 的 具体 日 期 和 和 时间。 

Date 对 象 最 简单 的 构造 函数 是 Date0， 格 式 如 下 : 


var today=new Date(); 
上 面 的 方法 定义 了 Date 对 象 的 实例 , 也 可 以 通过 构造 函数 来 表示 过 去 或 者 将 来 的 某 个 时 间 。 例 如: 
var past=new Date(2000,1,1); 1/ 创建 一 个 对 象 实例 ， 值 是 2000 年 1 月 1 日 


var tomorrow=new Date(2013,4,6); /创建 一 个 对 象 实例 ， 值 是 2013 年 4 月 6 日 


注意 : 此 处 有 个 问题 容易 出 错 , past 的 值 是 Tue Feb 1 00:00:00 UTC+0800 2000,， tomorrow 的 值 是 Fri May 
6 00:00:00 UTC+0800 2013， 显 示 的 结果 是 参数 中 月 份 +1。 


14.3.3 String 对象 


他 WH 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 \String 对 象 .wmv 
String 对 象 是 动态 对 象 ， 需 要 通过 new String(O) 创 建 对 象 实例 来 调用 属性 和 方法 。 事 实 上， 任何 一 
个 字符 串 常量 都 是 一 个 String 对 象 ， 可 以 直接 采用 “字符 串 常量 .属性 (方法 ) ”的 格式 来 调用 String 
对 象 的 属性 和 方法 。 
注意 : 这 两 种 调用 方法 的 区 别 可 以 采用 typeof0 来 体现 。 例 如 : 
typeof(new String("Beijing2008")); 
typeof("Beijing2008"); 
前 者 返回 的 是 object 类 型 ， 而 后 者 返回 的 是 string 类 型 。 
常用 的 String 对 象 的 属性 有 constructor 和 length 属性 。 


@ 
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constructor 属性 

表示 创建 对 象 的 函数 。 例 如 : 

stringA= new String("Beijing2008"); // 创 建 一 个 字符 串 对 象 实例 

if(stringA.constructor==String) // 检 查 是 否 创建 了 一 个 字符 串 对 象 实例 
alert(stringA); 

由 运行 可 知 ， 判 断 条 件 为 真 ， 执 行 了 弹出 对 话 框 显示 字符 串 的 操作 。 

length 属性 

是 String 对 象 最 常用 的 属性 之 一 。 返 回 字 符 串 的 长 度 ， 例 如 : 

stringA= new String("Beijing2008"); /创建 一 个 字符 串 对 象 实例 

leng=stringA.length; 

或 者 也 可 以 写 为 : 

stringA="Beijing2008"; // 创 建 一 个 字符 串 对 象 实例 


leng=stringA.length; 
通过 使 用 这 两 种 定义 方式 分 别 来 调用 String 对 象 的 length 属性 。 由 运行 结果 可 知 ， 二 者 返回 的 结 
果 一 样 ， 都 是 11。 
说 明 : 使 用 String 对 象 的 方法 很 多 ， 其 作用 包括 用 于 查找 和 匹配 字符 串 中 字符 的 方法 ， 或 者 是 用 于 提取 
子 字 符 串 的 方法 和 改变 字符 串 大 小 写 的 方法 等 。 


14.4 window 对 象 


window 对 象 在 文档 对 象 模型 的 最 高 层 ， 代 表 浏览 器 的 整个 窗口 ， 是 最 大 的 一 个 对 象 ， 因 为 所 有 的 
事件 都 发 生 在 窗口 中 。 开 发 者 可 以 通过 window 对 象 的 属性 、 方 法 和 事件 处 理 来 控制 浏览 器 的 显示 效 
果 。window 对 象 不 必 专 门 在 JavaScript 代码 中 创建 ， 打 开 浏览 器 后 会 自动 打开 一 个 窗口 ， 这 个 窗口 就 
是 一 个 可 用 的 window 对 象 。 在 调用 其 属性 和 方法 时 ， 不 需要 用 window.xxx 的 格式 ， 可 以 省 略 window 
前 级 。 


14.4.1 window 对 象 属性 


鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 \window 对 象 属性 .wmv 

在 JavaScript 语言 中 ，window 属性 有 很 多 。 接 下 来 ， 通 过 一 个 实例 来 观察 这 些 属性 的 效果 。 这 其 
中 包含 name、closed 和 opener 属性 。 

name 属性 的 作用 是 设置 或 获取 表明 窗口 名 称 的 值 。 

closed 属性 的 作用 是 获取 引用 窗口 是 否 已 关闭 。 

opener 属性 的 作用 是 设置 或 获取 创建 当前 窗口 的 引用 。 

具体 在 案例 中 的 使 用 如 实例 14-3 和 实例 14-4 所 示 ， 这 是 应 用 window 对 象 的 JavaScript 程序 。 


全 
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窗口 


【实例 14-3】 本 实例 创建 的 是 window 对 象 的 主页 面 。 


1 <head> 

2 <script> 

3 Var pop; 

4 pop= window.open 

5 ("child.htm","pop","width=255,height=235,resizable=1,scrollbars=auto,toolbar=no, 
6 menubar=no,location=0,top=10,left=200"); ”// 打 开 子 页 面 child.htm 
window.name=" 测 试 Opener 属性 "; 

8 alert(window.screenLeft+":"+window.screenTop); 

9 function b1(){ // 如 果子 窗口 还 没有 关闭 ， 则 关闭 它 
10 if(!pop.closed) 

11 { 

径 pop.close(); 

13 } 

14 } 

15 </script> 

16 </head> 

17 <body> 

18 window 属性 示例 <p> 

19 <font color=red onmouseover="javascipt:window.status=' 鼠 标 指向 我 ;" 
20 onmouseout="javascipt: window.status=' 鼠 标 没有 指向 

21 我 ;"> 把 鼠标 移动 这 里 来 </font> <br> <!-- 触 发 恨 标 事件 一 > 

2 <input type="button" name="b1" value=" 关 闭 窗口 " onclick="javascript:b1();"> 
23 </body> 


【实例 14-4】 本 实例 创建 的 是 window 对 象 的 子 页 面 ， 命 名 为 child.html。 


re 实例 14-4: 创建 window 对 象 的 子 页 面 
源码 路 径 : 光盘 \ 源 文件 \14\14-4.html 


1 <html> 

区 <body> 

3 这 是 一 个 测试 文件 ， 用 于 测试 文件 的 打开 与 关闭 。 

4 <p><font color=red onclick="javascipt: alert(window.opener.name);"> 单 击 显示 父 
5 ”窗口 的 名 称 </font> ”// 触 发 onclick 事件 

6 </body> 

7 </html> 


【运行 程序 】 浏 览 该 页 面 ， 上 边 代码 中 有 两 个 文件 ， 主 页 面 实现 的 功能 是 : 

(1) 打开 一 个 新 页 面 ， 并 通过 一 些 属性 设置 新 页 面 。 

(2) 如 实例 14-3 中 第 7 行 ， 通 过 window.name 设置 窗口 的 名 称 为 “测试 Opener 属性 ”。 
(3) 弹出 对 话 框 显 示 浏览 器 客户 区 左上 角 相 当 于 屏幕 左上 角 的 x、y 坐标 。 

(4) 通过 鼠标 移动 事件 检查 浏览 器 状态 栏 的 变化 。 


(5) 关闭 子 窗口 功能 ， 通 过 closed 属性 检查 子 窗口 是 否 已 经 关闭 ， 而 子 页 面 实现 的 功能 是 显示 父 


的 名 称 。 


所 
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实例 14-3 的 运行 效果 如 图 14.4 所 示 。 

【深入 学 习 】 在 图 14.4 中 ， 首 先 在 浏览 器 中 能 看 到 弹出 的 对 话 框 ， 对 话 框 中 显示 的 坐标 值 是 对 话 
框 相当 于 屏幕 左上 角 的 x 和 y 坐标 。 并 且 弹 出 子 页面 ， 其 作用 是 测试 文件 的 打开 和 关闭 ， 如 图 14.5 所 
示 。 当 单 击 子 页 面 中 红色 文本 “ 单 击 显示 父 窗口 的 名 称 ” 时 ， 页 面 弹出 对 话 框 表明 主页 面 的 名 称 为 “ 测 
试 Opener 属性 ”。 

当 单 击 主页 面 的 “确定 ”按钮 后 ， 如 果 鼠 标 指针 放置 的 位 置 没 有 在 红色 文本 字体 上 ， 则 状态 栏 显 
示 “ 鼠 标 没有 指向 我 ”。 反 之 ， 如 果 鼠 标 指针 移动 到 红色 文本 字体 上 ， 则 页 面 显示 “鼠标 指向 我 ”。 

此 时 再 单 击 主页 面 的 “关闭 窗口 ”按钮 ， 如 图 14.6 所 示 ， 子 窗口 就 被 关闭 。 这 体现 了 closed 属性 
的 效果 。 


k 
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14.4 主页 面 显示 效果 


莒 PP 清 #HTML+css+ja-| 喧 回 | 加 
这 是 一 个 测试 文件 ， 用 二 测试 文件 
的 打开 与 


win 


把 饼 标 移动 这 里 来 


关 半 画 吕 


14.5 子 页 面 显示 效果 14.6 单 击 “确定 ”按钮 后 的 显示 结果 


说 明 : window 对 象 的 属性 还 有 很 多 ， 如 表 14.1 所 示 ， 读 者 可 参考 。 


表 14.1 window 对 象 的 属性 


属 性 名 描 述 
defaultStatus 设置 或 获取 要 在 窗口 底部 的 状态 栏 上 显示 的 默认 信息 
dialogArguments 设置 或 获取 传递 给 模式 对 话 框 窗口 的 变量 或 变量 数组 
dialogHeight 设置 或 获取 模式 对 话 框 的 高 度 
dialogLeft 设置 或 获取 模式 对 话 框 的 左 坐 标 
dialogTop 设置 或 获取 模式 对 话 框 的 项 坐标 
dialogWidth 设置 或 获取 模式 对 话 框 的 宽度 
frameElement 获取 在 父 文档 中 生成 window 的 frame 或 过 ame 对 象 
length 设置 或 获取 集合 中 对 象 的 数目 
offscreenBuffering 设置 或 获取 对 象 在 对 用 户 可 见 之 前 是 否 要 先 在 屏幕 外 绘制 
opener 设置 或 获取 创建 当前 窗口 的 窗口 的 引用 
IetumValue 设置 或 获取 从 模式 对 话 框 返 回 的 值 
screenLeft 获取 浏览 器 客户 区 左上 角 相当 于 屏幕 左上 角 的 x 坐标 
ScreenTop 获取 浏览 器 客户 区 左上 角 相当 于 屏幕 左上 角 的 y 坐标 
self 获取 对 当前 窗口 或 框架 的 引用 
status, 设置 或 获取 位 于 窗口 底部 状态 栏 的 信息 
top 获取 最 顶层 的 祖先 窗口 


ss Raat 


14.4.2 ”window 对 象 方法 


印 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 14 章 \window 对 象 方法 -wmv 

所 谓 方法 即 是 如 何 通过 window 对 象 属性 来 使 这 些 属 性 发 挥 各 自 的 作用 。 和 属性 一 样 ，window 对 
象 属性 所 对 应 的 使 用 方法 也 有 很 多 。 本 节 通 过 一 系列 不 同属 性 的 使 用 方法 , 来 了 解 一 些 常 用 window 对 
象 的 属性 调用 。 

open()、close0 方 法 

产生 新 窗口 的 方法 就 是 window.open0。 例 如 : 


1 varnewWindow1=window.open("world.html","world","height=300,width=400"); 

2 varnewWindow2=window.open("../world.html","we","height=100, resizable=no"); 
3 varnewWindow3=window.open 

4 ("http://www.sohu.com/","sohu","height=100,width=200,resizable=no, 

5 menubar=yes,toolbar=no"); 


上 述 代码 中 定义 了 变量 (如 newWindow1) ， 当 运行 window.open() 方 法 时 将 新 窗口 的 引用 赋 给 变 
量 newWindow1， 之 后 就 可 以 通过 引用 newWindow1 调用 方法 来 控制 新 窗口 。open0 方 法 有 3 个 参数 : 
第 1 个 参数 是 要 打开 的 页 面 的 URL， 当 新 窗口 与 主 窗口 在 同一 目录 下 时 ， 直 接 写 文件 名 即 可 ， 如 
上 述 代码 第 1 行 ， 当 新 窗口 与 主 窗口 不 在 同一 目录 下 时 ， 则 写 新 窗口 的 相对 路 径 ， 如 代码 第 2 
行 。 新 窗口 也 可 以 是 绝对 路 径 或 者 http 地 址 。 
第 2 个 参数 是 新 窗口 的 名 称 ， 如 果 打开 新 窗口 时 为 空 ， 之 后 还 可 通过 window.name 设置 。 
第 3 个 参数 是 窗口 风格 的 设置 。 
close() 方 法 是 与 open() 方 法 对 应 的 , 用 于 关闭 窗口 。 需 要 关闭 哪个 窗口 就 通过 相应 窗口 的 引用 调用 
close0 方 法 。 在 调用 close0 方 法 前 一 般 都 会 先 检查 窗口 是 否 仍然 打开 ， 和 否则 可 能 会 引起 不 必要 的 错误 。 
alert0 方 法 
弹出 一 个 警告 对 话 框 显示 参数 。 单 击 对 话 框 中 的 “确定 ”按钮 就 可 退出 对 话 框 。 例 如 : 
alert(" 北 京 2008Olympic! One World，One Dream! "); 
这 个 方法 在 调试 脚本 程序 时 比较 有 用 ， 类 似 于 其 他 编程 语言 中 的 打印 语句 。 
注意 : 完整 的 引用 格式 是 “window.alert( 字 符 串 );”， 但 是 对 于 对 话 框 窗口 都 不 引用 window， 而 直接 使 
用 方法 ， 这 样 简单 一 些 。 
confirm() 方 法 
显示 一 个 具有 OK 和 Cancel 按钮 的 对 话 框 ， 根 据 用 户 的 选择 分 别 返 回 te 或 者 false， 程 序 根据 返 
可 值 进 行 不 同 的 处 理 。 例 如 : 


var answer=confirm("Are you access the website?"); 
if(answer) 


{ 
location.href="http://www.sohu.com"; // 跳 转 到 http://www.sohu.com 
} 


他- 
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当 用 户 单 击 “ 确 定 ” 按 钮 时 就 跳 转 到 http://www.sohu.com。 该 方法 可 以 用 在 访问 可 能 存在 不 安全 


因素 的 网 站 时 ， 提 示 用 户 是 否 继续 。 


prompt0 方 法 
显示 一 个 用 户 可 以 输入 信息 的 对 话 框 ， 并 返回 用 户 输入 的 内 容 。 第 1 个 参数 是 提示 信息 ， 以 字符 


串 形 式 表达 。 第 2 个 参数 是 输入 信息 的 默认 值 ， 可 以 提供 输入 信息 的 样本 。 例 如 : 


var answer=prompt("what is your name?",""); 
if(answer) 
{ 
alert("Hellol"+answer+",WELCOME!); 
} 


下 面 将 上 述 使 用 方法 整合 在 同一 个 页 面 中 ， 这 样 ， 页 面 将 展示 出 独特 的 魅力 ， 如 实例 14-5 中 的 


window 对 象 页 面 。 


【实例 14-5】 本 实例 使 用 window 对 象 方法 制作 主页 面 。 


re 实例 14-5: 使 用 window 对 象 方法 制作 主页 面 
源码 路 径 : 光盘 \ 源 文件 \14\14-5.html 


吕 <script language= "javascript > 

这 var pop= window.open /打开 子 页 面 child.html 

3 ("child.html","pop","width=255,height=235,resizable=1,scrollbars=auto") 
4 pop.setTimeout("close()",2*5000); 

5 function method() /此 方法 展示 confirm() 的 用 法 
6 

区 alert(" 北 京 2008Olympic! One World，One Dream! "); 

8 var answer=confirm("Do you want to see news about 2008Olympic?"); 

9 if(answer) 

10 

11 var yourName=prompt("what is your name?","™); 

但 if(yourName) 

13 { 

14 alert("Hello"+yourName+",WELCOME!"); 

15 } 

16 } 

ke setinterval("changeWindow()",2000); /| 每 隔 2 秒 调用 方法 changeWindow() 
18 } 

19 function changeWindow() 

20 { 

21 window.resizeBy(-10,-10); // 改 变 窗口 大 小 

22 1 

23 </script> 

24 <body bgcolor="white" onload="method()"> 

re) <H1>window 方法 示例 </H1> 

26 <H2> 子 窗口 child2.html 在 打开 10 秒 钟 后 就 关闭 ! </H2> 

27 </body> 


【实例 14-6】 本 实例 是 使 用 window 对 象 方法 的 子 页 面 ， 命 名 为 child2.html。 


ud 
区 
3 
4 <font color="red"><H1> 我 10 秒 钟 后 就 关闭 ， 珍 惜 我 哦 !</h1></font> 
5 </center> 

6 

江 


</html> 


【运行 程序 】 实 例 14-5 中 包含 使 用 window 对 象 方法 的 主页 面 ， 实 例 14-6 是 使 用 window 对 象 方 
法 的 子 页 面 。 这 两 段 代码 共同 完成 以 下 功能 : 当 浏 览 者 打开 页 面 ， 首 先 出 现 的 是 如 图 14.7 所 示 的 页 面 。 
在 载 入 页 面 时 弹出 警告 对 话 框 ， 显 示 “ 北 京 2008Olympic! One World，One Dream! ”。 


单 击 图 14.7 中 的 “确定 ”按钮 ， 则 弹出 确认 对 话 框 ， 显 示 提 示 信 息 “Do you want to see news about 
2008Olympic?”， 如 图 14.8 所 示 。 


回 } sla| 3 】 
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window 方 法 示例 window 方 法 示例 
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图 14.7 打开 windowMethod.html 的 效果 14.8 ”确认 对 话 框 的 显示 效果 


【深入 学 习 】 如 果 在 图 14.8 中 的 确认 对 话 框 中 单 击 “ 确 定 ” 按钮， 则 弹出 可 以 输入 信息 的 对 话 框 ， 
提示 “what is your name?”， 如 图 14.9 所 示 。 如 果 输 入 不 为 空 ， 则 通过 对 话 框 显 示 用 户 输入 的 信息 。 
例如 ， 在 文本 框 中 输入 字符 串 zhan huiji， 单 击 “ 确 定 ” 按 钮 ， 显 示 效 果 如 图 14.10 所 示 。 


CEE CSS+Jt DO EEC | < 


lm 2 | 
2 SET 加 ET | 


Wiadoy 方 法 示例 | window 方 法 示例 


子 窗口 child. html 在 打开 10 秒 钟 后 就 关闭 ! 子 窗口 child.html 在 打开 10 秒 钟 后 就 关闭 ! 


mi | 


-| 
that is Yoar panefy 


也 100% ~ 


14.9 可 以 输入 信息 的 对 话 框 


14.10 显示 文本 框 中 输入 的 字符 串 


单 击 “ 确 定 ”按钮 后 ， 窗 口 每 隔 2 秒 在 水 平和 垂直 方向 均 缩 小 10px， 直 到 浏览 器 客户 区 完全 消失 ， 
如 图 14.11 所 示 。 


~ 
Oar p - c | 全 Peer 
文件 站 涯 和 (5) 二 理 (V) 让 二 夫 A| 工具 帮助 0 ” 


window 方 法 示例 
子 窗口 child. html 在 打开 10 秘 
后 就 关闭 ! 


| Cr 
图 14.11 窗口 逐渐 减 小 效果 


在 图 14.11 中 可 以 看 到 ， 窗 口中 的 字体 相对 于 窗口 来 说 逐渐 变 大 ， 这 是 由 于 窗口 逐渐 减 小 的 缘故 。 
此 外 ， 在 打开 主页 面 窗口 的 同时 ， 也 自动 打开 子 页 面 窗口 ， 该 窗口 存在 10 秒 后 也 会 自动 关闭 。 


14.4.3 ”window 对 象 事 件 


名 8 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 14 章 \window 对 象 事件 .wmv 

在 操作 浏览 器 时 ， 大 多 数 动作 都 是 通过 鼠标 或 键盘 操作 引起 的 ， 因 为 鼠标 和 键盘 是 日 常生 活 中 最 
常用 的 输入 设备 。 那 么 用 户 与 浏览 器 交互 怎么 实现 ? 输入 设备 引起 的 事件 怎么 处 理 ? 什么 时 候 处 理 ? 
这 就 得 求助 于 事件 和 事件 处 理 程序 了 。window 对 象 的 事件 是 最 令 人 入 迷 的 部 分 之 一 。 没 有 事件 处 理 程 
序 就 会 显得 死板 ， 不 够 灵活 。 

window 对 象 的 事件 处 理 程序 要 放 在 <body> 标 签 的 时 间 属 性 设置 中 ， 例 如 : 

onload="window_onload() 


onload 就 是 一 个 事件 处 理 程序 。 类 似 这 样 的 事件 很 多 ， 通 过 一 系列 的 整合 ， 可 以 实现 很 多 实用 的 
功能 ， 例 如 ， 实 例 14-7 就 介绍 了 window 对 象 的 事件 。 
【实例 14-7】 本 实例 详细 介绍 window 对 象 的 事件 。 


实例 14-7: window 对 象 的 事件 
源码 路 径 : 光盘 \ 源 文件 \14\14-7.html 


1 <scriptlanguage="javascript"> 

2 Var pop; 

| function window_onload() /此 函数 打开 子 窗口 child.html 

图 { 

5 pop= 

6 window.open("child.html","pop","width=255,height=235,resizable=1,scrollbars=auto" ); 
区 

8 

5 


} 
function window_onkeypress(){ 


if(window.event.keyCode==27) / 按 Esc 键 退出 页 面 
10 window.close(); 
《| else 
12 alert(window.event.keyCode); /显示 ASCII 码 
43 
14 function checkNum(}{ 
15 num.value="031268"; /| 初始 号 码 设 为 031268 
16 } 


17 function window_onclick(){ 


18 alert( "提交 成 功 ); /触发 后 弹出 提交 成 功 

19 } 

20 function child_close(}{ 

21 pop.close(); 

22 } 

23 </script> 

24 <body onload="window_onload()" onkeypress="window_onkeypress() 
25 ”onbeforeunload="window.event.returnValue=' 子 页 面 同时 也 会 被 关闭 ”" 
26 onunload="child_close()"> 

27 ”你 的 编号 : <input type=text name=num onfocus="checkNum()"><br> 

28 <inputtype=submit name=submit1 value=" 递 交 " onclick="window_onclick()"> 
29 ”</body> 


注意 : open(O) 函 数 中 的 child.html 文 件 是 一 个 已 存在 文件 ， 内 容 不 重要 ， 此 处 只 是 为 介绍 onload 的 用 法 。 
【运行 程序 】 上 述 代码 实现 的 功能 过 程 是 ， 在 页 面 载 入 打开 后 ， 如 图 14.12 所 示 ， 触 发 onload 事 


件 打开 子 窗口 ， 当 单 击 文本 框 ， 触 发 onfocus 事件 时 , 文本 框 中 自动 显示 “031268”。 然后 单 击 “ 递 交 ” 
按钮 ， 触 发 onclick 事件 ， 弹 出 警告 框 显示 “提交 成 功 ”， 如 图 14.13 所 示 。 


四 己 | 回 | B | 
(DOE FA 清 HTML+CSS+Je 站 -CC A 清 HTML+CSS+J -0 
文件 (FP) 坊 涡 (E) 查看 (V) 收藏 只 A) 工 ” ME) a 
你 的 编号 ， ] 你 的 编号 a 
EE3 EE EE 
他 Ra 
戌 100% ~ | 2 
图 14.12 ”windowEventhtml 显示 效果 14.13 触发 onfocus 和 onclick 事件 的 效果 


【深入 学 习 】 该 页 面 还 有 一 个 有 意思 的 功能 是 ， 如 果 浏 览 者 按 任 意 键 ， 将 弹出 对 话 框 ， 显 示 其 
Unicode 码 ， 如 图 14.14 所 示 为 按 下 键盘 上 的 G 键 。 

单 击 图 14.14 中 的 “确定 ”按钮 后 ， 如 果 用 户 关闭 此 窗口 ， 将 触发 onbeforeunload 事件 ， 弹 出 确认 
消息 ， 如 图 14.15 所 示 。 如 果 单 击 “ 确 定 ” 按 钮 ， 则 触发 onunload 事件 ， 在 主 窗口 关闭 的 同时 也 关闭 
子 页 面 。 
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【i 确实 要 商 开 此 页 吗 ? 
来 让 网 页 的 清 息 


了 而 同时 也 会 地 半 潭 


3 离开 此 页 () 
二 窗 在 此 页 (S) 


图 14.14 显示 键盘 的 Unicode 码 14.15 ”触发 onbeforeunload 事件 的 效果 


@ 
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说 明 : 通过 这 个 实例 ， 读 者 可 以 了 解 window 对 象 事件 。 当 然 ，window 对 象 事件 有 很 多 ,读者 可 以 参考 
更 多 书籍 。 


14.5 ” document 对 象 


document 对 象 是 window 对 象 的 一 个 对 象 属性 ， 代 表 浏 览 器 窗口 中 装载 的 整个 HTML 文档 。 文 档 
中 的 每 个 HTML 元 素 都 对 应 着 JavaScript 对 象 。 设 计 者 要 结合 HTML 标签 和 JavaScript 产生 最 佳 效 果 。 
因为 document 代表 整个 HTML 文档 , 是 其 他 HTML 元 素 的 根 节点 , 其 他 节点 可 以 通过 document 引用 。 
document 的 属性 和 方法 一 般 用 来 设置 页 面 文档 的 外 观 和 内 容 。 


14.5.1 document 对 象 属性 


全 知识 点 讲解 光盘 \ 视 频 讲解 \ 第 14 章 \document 对 象 属性 .wmv 
document 对 象 属性 实现 的 功能 使 用 HTML 中 的 标签 也 可 以 实现 ， 从 其 表面 效果 来 看 相似 , 但 是 与 
事件 处 理 程序 结合 使 用 时 就 体现 出 了 二 者 的 不 同 。 常 用 的 属性 如 表 14.2 所 示 。 


表 14.2 document 对 象 的 属性 


属 性 说 了 明 
title 设置 文档 标题 
bgColor 设置 页 面 背景 色 
feColor 设置 前 景色 ， 即 文本 颜色 
linkColor 未 访问 过 的 链接 颜色 
alinkColor 在 超 链接 上 单 击 时 的 颜色 
vlinkColor 已 经 访问 过 的 链接 颜色 
URL 设置 URL 属性 ， 从 而 在 同一 窗口 打开 另 一 网 页 
fileCreatedDate 以 字符 串 形式 返回 文件 建立 日 期 
fileModifiedDate 以 字符 串 格式 返回 文件 修改 日 期 
filesize 返回 网 页 文档 的 大 小 
cookie 设置 和 返回 cookie 值 
charset 返回 网 页 文档 所 使 用 的 字符 编码 方式 


14.5.2 ” document 对 象 方法 


贸 m 知识 点 讲解 :光盘 \ 视 频 讲解 \ 第 14 章 \document 对 象 方法 .wmv 
document 对 象 的 方法 最 常用 的 就 是 writeln0) 方 法 ， 一 些 常用 的 document 对 象 方法 如 表 14.3 所 示 。 
表 14.3 ” document 对象 的 方法 


方 法 描述 
open0 | 打开 一 个 流 ， 跟 window 对 象 的 open0 方 法 类 似 
closeO) 关闭 open0 方 法 打开 的 输出 流 


®@ 
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续 表 
方 。 法 描 述 
writeO | 向 HTML 文档 中 写 入 内 容 
writelnO | 与 write0 方 法 相 比 ， 每 次 写 完 内 容 之 后 多 一 个 换行 符 
_getElementByIdO | 返回 文档 中 任何 元 素 (ID 属性 具有 唯一 性 ) 的 引用 


返回 指定 name 属性 值 的 对 象 的 引用 数组 
返回 指定 标签 名 的 对 象 的 引用 数组 
产生 一 个 代表 某 个 HTML 元 素 的 对 象 ， 而 后 使 用 父 元 素 的 方法 来 修改 文档 的 内 容 〈 如 
appendChild0 方 法 ) 


createElement 


14.5.3 document 对 象 事件 


名 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 \document 对 象 事件 .wmv 

document 对 象 常用 的 事件 处 理 程序 就 是 window 对 象 中 介绍 的 通用 事件 ， 此 处 不 再 歼 述 。 下 面 通 
过 一 个 document 对 象 的 实例 来 演示 其 属性 和 方法 的 使 用 。 

【实例 14-8】 本 实例 介绍 document 对 象 的 属性 和 方法 的 使 用 ， 命 名 为 document.html。 


实例 14-8: document 对 象 的 属性 和 方法 的 使 用 
源码 路 径 : 光盘 \ 源 文件 \14\14-8.html 


1 <script language="javascript"> 

2 function setDocument() 

3 

4 document.bgColor="white"; // 设 置 背景 颜色 为 白色 
5 document.fgColor="black"; /设置 字体 颜色 为 黑色 
6 document.alinkColor="red"; 

7 document.vlinkColor="green"; 

8 document.linkColor="yellow"; 

9 

10 function create_Element() 

| { 

12 var area = document.getElementByld("area"); // 通 过 area 取得 对 象 
13 var element = document.createElement("input"); 。“// 动 态 创建 一 个 对 象 

14 element.type = "radio"; // 对 象 类 型 是 单 选 按 钮 
15 var obj = area.appendChild(element); // 将 对 象 插入 到 area 中 
16 obj.checked = true; // 单 选 按钮 默认 状态 是 选中 状态 
17 } 

18 </script> 


19 <body onload="setDocument()"> 

20 <H1>document 对 象 的 属性 和 方法 示例 </H1><br> 

2 <font color=red onclick="javascript:create_Element()"> 点 一 下 这 里 </font><br><br> 
2 <a href="newWindow.html"> 进 入 新 窗口 </a><br> 

和 3 <div id="area"></div> 

24 </body> 


这 段 代码 中 ，document 对 象 使 用 到 的 分 别 是 getElementById0 和 createElement()。getElementById0 
是 指 返 回 文档 中 任何 元 素 (ID 属性 具有 唯一 性 ) 的 引用 。 所 以 在 代码 中 , 表示 将 获得 area 层 中 的 元 素 。 
createElementO 是 指 产 生 一 个 代表 某 个 HTML 元 素 的 对 象 ， 而 后 使 用 父 元 素 的 方法 来 修改 文档 的 内 容 ， 
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同样 ，appendChild0 方 法 也 是 如 此 。 
【实例 14-9】 本 实例 的 代码 是 链接 窗口 ， 命 名 为 newWindow.html。 


实例 14-9: 链接 窗口 
源码 路 径 : 光盘 \ 源 文件 \14\14-9.html 


1 <scriptlanguage="javascript"> 

2 ”document.write("Hello! 欢 迎 来 到 新 窗口 "); 
3 </script> 

4 <body> 

5 ”<H1> 这 是 新 窗口 </H1> 

6 </body> 


【运行 程序 实例 14-9 中 包括 document.html 和 newWindow.html 两 个 文件 。 当 浏览 者 打开 页 面 时 ， 
图 14.16 显示 了 document.html 打开 的 效果 ， 有 标题 、 红 色 文 本 和 超 链 接 ， 而 这 些 都 是 通过 document 
对 象 设置 网 页 文档 的 背景 颜色 、 字 体 颜色 和 超 链 接 等 属性 信息 ， 而 不 是 通过 HTML 语言 。 

在 图 14.16 中 单 击 “ 点 一 下 这 里 ”， 出 现 一 个 已 选 定 的 单 选 按钮 ， 比 如 ， 单 击 6 次 “点 一 下 这 里 ” 
就 显示 相应 数量 的 单 选 按钮 ， 如 图 14.17 所 示 。 这 由 代码 中 第 14 行 和 第 15 行 实现 。 接 下 来 测试 超 链接 
的 功能 ， 单 击 图 14.16 中 “进入 新 窗口 ” 超 链接 ， 页 面 转 入 新 窗口 ， 如 图 14.18 所 示 。 另 外 ， 还 可 以 看 
到 超 链接 颜色 在 未 访问 时 、 已 访问 过 和 选中 时 的 不 同 。 
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点 一 下 这 里 
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14.16 document html 显示 效果 


2] FGHTML+CSS+J: D = | 
文件 从 ” 蜗 加 全) ”查看 V) 收藏 夫 (A) 工 ” 
| Bell ' 欢 池 末 到 基本 口 


这 是 新 窗口 


14.18 newWindow .html 显示 效果 


注意 : JavaScript 中 还 有 很 多 其 他 对 象 。 事 实 上 ，HTML 中 的 每 个 元 素 基本 上 都 在 JavaScript 中 有 相应 的 
对 象 。 由 于 本 书 主要 是 介绍 HIML 和 CSS，JavaScript 部 分 是 想 让 初学 者 掌握 动态 页 面 的 实现 原 
理 、JavaScript 的 基本 语法 、 动 态 页 面 的 一 般 编写 方法 ， 以 配合 HTML 和 CSS 设 计 出 生动 活泼 的 
页 面 。 可 是 实际 运用 的 设计 中 ， 这 些小 例子 肯定 是 无 法 满足 设计 需求 的 ， 开 发 者 需要 将 这 些 基 
本 的 知识 组 合 起 来 ， 灵 活 地 应 用 才能 获得 令 人 满意 的 特效 。 
罗 
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14.6 案例: 一 个 运用 JavaScript 实现 的 动态 页 面 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 \ 案 例 : 一 个 运用 JavaScript 实现 的 动态 页 面 .wmv 
通过 前 面 的 学 习 已 经 知道 JavaScript 可 以 用 来 实现 表单 验证 , 例如 登录 某 个 论坛 时 需要 填写 用 户 名 


和 密码 ， 还 可 以 响应 鼠标 


E 击 事件 、 键 盘 敲 击 事件 、 窗 口 移动 事件 、 窗 口 大 小 改变 事件 、 文 档 载 入 事 


件 和 文档 卸载 事件 等 。 这 就 是 JavaScript 为 什么 能 创建 动态 HIML 页 面 ， 从 而 实现 用 户 与 浏览 器 交互 ， 
使 得 在 有 限 的 页 面 中 展现 更 多 的 内 容 ， 使 网 站 更 加 生动 ， 吸 引 更 多 的 浏览 者 ， 给 用 户 良 好 的 体验 。 
在 了 解 了 HTML、CSS 和 JavaScript 后 ， 就 可 以 动手 设计 一 个 漂亮 的 页 面 了 ， 除 了 指 外 观 美观 外 ， 


功能 要 实用 。 在 实例 14-10 


中 尽 可 能 地 包含 了 前 面 介 绍 的 对 象 及 其 属性 、 方 法 和 事件 。 


【实例 14-10】 本 实例 使 用 JavaScript 实现 一 个 用 户 登录 的 动态 页 面 ， 命 名 为 goodLogin.html。 


10: 使 用 JavaScript 实现 一 个 用 户 登 录 的 动态 页 面 


re 实例 14- 
源码 路 径 : 光盘 \ 源 文件 \14\14-10.html 


1 <html> 

2 <head> 

3 <title> 现 在 时 间 是 </title> 

4 <meta content="text/html; charset=gb2312" http-equiv=Content-Type> 

各 <script language=JavaScript> 

6 在 网 页 标题 上 显示 当前 时 间 */ 

区 document.title = document.title+new Date(); 

8 </script> 

9 </head> 

10 <body text="Olive" alink=navy vlink=red link=aqua> 

11 <!- 图 标的 区 域 ， 此 图 标 可 以 在 页 面 上 移动 ， 下 面 由 函数 来 实现 此 效果 --> 
12 <div id=float_icon style="VISIBILITY:hidden;POSITION:absolute;LEFT=0;TOP=0"> 
13 <img src="image/2.gif'> 

14 </div> 

Eb <div align="center"><center> 

16 <font size="4" ><H1> 轻 松 学 习 JavaScript</H1></font> 

17 <table border=0 cellpadding=0 cellspacing=0><tr bgcolor="gray"> 

18 <tr><td> 

19 <pre><font color="black" size="3"> 

20 您 希望 设计 出 实用 、 美 观 的 网 页 吗 ? 你 设计 的 网 页 美观 吗 ? 学 

21 习 了 JavaScript， 您 就 可 以 肯定 的 回答 了 。 

2 </font></pre> 

23 </td></tr> 

24 </table><br><br> 

25 <H2> 下 面 是 一 个 用 JavaScript 实现 的 登录 例子 </h2> 

26 

27 <!- 制 作 一 个 表单 --> 

28 <form name=form1 action="javascript:login()" method=post> 

29 用 户 名 : <input type=text name=user onkeypress="checkChar(this.form)"><br> 
30 密码 : <input type=password name=psw onfocus="checkNamel(this.form)"><br> 
31 <input type=submit name=submit1 value=" 提 交 "> 
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32 <input type=reset name=cancel value=" 取 消 "> 
3 </form> 

34 </center></div> 

35 </body> 

36 </html> 


实例 14-10 是 本 案例 的 主体 框架 ， 设 置 了 该 网 页 的 样式 和 结构 。 在 网 页 头 部 实现 了 显示 当前 时 间 
的 功能 。 其 中 登录 验证 函数 checkChar0、checkName0 和 login0， 以 及 图 标 在 窗 体 中 移动 的 功能 由 实 
例 14-11 实现 。 

【实例 14-11】 本 实例 实现 登录 验证 功能 。 


实例 14-11: 实现 登录 验证 功能 
源码 路 径 : 光盘 \ 源 文件 \14\14-11.html 


1 <scriptlanguage="javascript"> 

2 /下 面 的 代码 实现 当 图 标 碰 到 窗口 边界 时 ， 改 变 图 标 移动 的 方向 。 

3 如 果 图 标 左边 位 置 加 上 图 标 宽度 大 于 窗口 宽度 ， 就 表示 图 标 

4 已 碰 到 窗口 右边 界 */ 

5 var dirX=1,dirY=1; 

6 var xPos=0;yPos=0; 

网 float_icon.style.top=0; 

8 document.body.all.float_icon. style.left=0 

9 document.body.all("float_icon").style.visibility="visible"; 。 // 设 定 图 标 可 见 

10 window.setinterval("movelcon()",100); /每 隔 0.1 秒 移动 一 次 位 置 
il /此 函数 定义 图 标的 轨迹 */ 

12 function movelcon(X{ 

13 xPos+=2*dirX; 

14 yPos+=2*dirY; 

15 float_icon.style.top=yPos; 

16 float_icon.style.left=xPos; 

17 if(xPos<=0||xPos+float_icon.offsetWidth>=document.body.clientWidth) 
18 dirX=-dirX; /如 果 图 标的 横 坐 标 超出 窗口 边界 ， 则 图 标 向 相反 方向 移动 
19 

20 if(yPos<=0||lyPos+float_icon.offsetHeight>=document.body.clientHeight) 

| dirY=-dirY; /如 果 图 标的 纵 坐 标 超出 窗口 边界 ， 则 图 标 向 相反 方向 移动 
22 了 

23 /检查 用 户 名 必须 是 a~z 的 字母 */ 

24 function checkChar(frm}{ 


25 if(window.event.keyCode>'z'.charCodeAt(0)|| 
26 window.event.keyCode<'a'.charCodeAt(0)) 


2 ‘ 

28 window.event.returnValue=0; // 取 消 浏览 器 的 默认 事件 

29 alert(" 必 须 输入 a-z 的 字母 "); 

30 } 

31 于 

32 检查 必须 先 输入 用 户 名 ， 再 输入 密码 */ 

33 function checkName(frm)j{ 

34 if(frm.user.value=="™") // 如 果 用 户 名 为 空 ， 则 弹出 提示 信息 
35 

36 alert(" 你 必须 先 输入 用 户 名 "); 


} 
40 ”检测 是 否 登 录 成 功 */ 


41 function login(){ 

42 让 如 果 用 户 名 为 bupt， 密 码 为 bupt 则 登录 成 功 */ 
43 if((form1.user.value=="bupt")&&(form1.psw.value=="bupt")) 
44 { 

45 alert(" 成 功 "); 

46 下 

47 else 

48 

49 alert(" 失 败 "); 

50 } 

51 } 

52 </script> 


【运行 程序 】 在 运行 时 ， 将 实例 14.11 放 在 实例 14.10 的 任意 部 分 都 可 以 ， 这 体现 了 JavaScript 的 
一 个 特点 , 因为 JavaScript 代码 是 放 在 <script></scrip 人 > 标签 对 之 间 ， 因 此 不 管 放 在 什么 位 置 都 具有 较 好 
的 可 读 性 。 代 码 整 合 后 ， 使 用 浏览 器 打开 页 面 ， 如 图 14.19 所 示 。 

【深入 学 习 】 图 14.19 中 的 标题 上 显示 着 当前 时 间 ， 有 供用 户 填写 用 户 名 和 密码 的 文本 框 。 还 有 一 
张 笑脸 的 GIF 图 像 浮动 在 文字 上 方 ， 并 且 在 各 个 窗口 间 不 停 移动 。 当 碰 到 窗口 边界 时 ， 图 像 会 改变 移 
动 的 方向 ， 如 同 碰 到 墙壁 被 弹 开 一 样 。 

在 这 个 页 面 中 ， 要 求 用 户 在 “用 户 名 ”文本 框 中 输入 由 字母 组 成 的 名 字 ， 如 果 输 入 数字 ， 就 弹出 
警告 对 话 框 , 提示 “必须 输入 a-z 的 字母 ”， 这 是 通过 触发 onkeypress 事件 来 实现 的 。 当 事件 被 触发 时 ， 
调用 checkChar0 函 数 检查 按键 是 否 是 字母 ， 如 图 14.20 所 示 。 
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图 14.19 ”goodLogin.html 显示 效果 图 14.20 ”必须 输入 字母 提示 对 话 框 


而 如 果 用 户 跳 过 “用 户 名 ”文本 框 ， 先 输入 密码 ， 会 提示 “你 必须 先 输入 用 户 名 ”， 这 是 通过 触 
发 onfocus 事件 来 实现 的 。 当 事件 被 触发 时 ， 调 用 checkName0 判 断 用 户 名 的 值 是 否 为 室 ， 如 果 为 空 ， 
则 提示 警告 信息 ， 并 且 “ 用 户 名 ”文本 框 将 得 到 焦点 ， 此 时 系统 提示 必须 先 输入 用 户 名 ， 如 图 14.21 
所 示 。 


局 


第 14 章 


单 击 “ 确 定 ”按钮 ，“ 用 户 名 ”文本 框 会 自动 获得 焦点 。 如 果 在 实例 14-11 中 输入 正确 的 登录 名 
和 密码 (这 里 事先 将 登录 用 户 名 设置 为 bupt， 密 码 是 bupt) ， 当 页 面 验证 两 者 都 正确 时 则 弹出 对 话 杠 
提示 成 功 ， 如 图 14.22 所 示 ， 否 则 提示 失败 。 
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下 而 是 一 个 用 ESDERESR 抽 的 登录 例子 
月 户 名 
写 页，lew"， 
EE3 
R100% lo0% 
图 14.21 系统 提示 必须 先 输入 用 户 名 14.22 ”登录 成 功 


在 编写 JavaScript 程序 时 要 特别 认真 , 尽量 避免 函数 名 错误 或 者 函数 名 缺失 等 不 必要 的 错误 。 尤其 
是 在 用 记事 本 编写 时 ， 它 本 身 没 有 语法 检查 的 功能 ， 只 能 在 浏览 器 解释 时 返回 错误 。 但 是 浏览 器 并 不 
能 够 报告 JavaScript 中 的 所 有 错误 。 

例如 ， 在 实例 14-10 中 ， 如 果 将 : 


<input type=text name=user onkeypress="checkChar(this.form)"> 

写成 : 

<input type=text name=user onkeypress="checkChar"> 

此 时 ， 在 “用 户 名 ”文本 框 中 输入 数字 时 ， 浏 览 器 不 会 报告 错误 ， 这 就 违背 了 设计 时 的 需求 。 对 
于 这 些 不 易 发 现 的 错误 ， 在 调试 的 过 程 中 可 以 仿照 其 他 编程 语言 中 添加 打印 语句 的 方法 ， 在 JavaScript 
中 添加 alert 语句 来 找到 错误 的 源头 。 


说 明 : 对 于 经 验 不 足 的 网 页 设计 者 来 说 ， 这 种 方法 是 很 有 效 的 。 当 然 ， 在 开发 者 对 网 页 编程 较为 熟悉 
时 ， 就 会 有 敏锐 的 直觉 了 。 大 多 数 情 况 下 ， 在 无 法 得 到 预想 结果 时 ， 熟 练 的 程序 员 会 知道 该 去 
查看 哪 块 代码 ， 这 就 是 熟 能 生 巧 ， 所 以 多 多 练习 是 必需 的 。 


14.7 小 结 


本 章 对 于 JavaScript 的 探讨 仅仅 停留 在 帮助 读者 从 HTML 学 习 过 渡 到 JavaScript 的 学 习 , 是 给 读者 
今后 学 习 JavaScript 做 一 个 入 门 的 启发 ， 主 要 的 学 习 内 容 有 : 

对 象 和 DOM 的 概念 。 有 一 个 宏观 的 概念 ， 了 解 学 习 的 知识 在 网 页 设计 中 的 位 置 。 

JavaScript 的 数组 的 定义 和 使 用 方法 。 


LHCSS 网 页 设计 详解 


JavaScript 中 常用 的 3 个 内 部 对 象 : Math、Date 和 String 对 象 。 
处 在 文档 对 象 模型 的 最 高 层 ,代表 浏览 器 整个 窗口 的 window 对 象 及 其 属性 、 方 法 和 事件 ， 这 部 分 
用 处 很 大 ， 所 以 花 了 很 大 篇 幅 来 介绍 。 
最 后 在 案例 中 介绍 了 一 个 实用 的 文档 对 象 一 一 document 对 象 ， 及 其 属性 、 方 法 和 事件 。 
在 第 15 章 中, 将 介绍 几 种 常见 的 帮助 页 面 设计 人 员工 作 的 得 力 助手 一 一 可 视 化 编辑 软件 。 设计 人 
员 利 用 这 些 工 具 ， 可 以 提高 工作 效率 ， 实 现 更 好 的 设计 效果 。 


14.8 本 章 习题 


习题 14-1 编写 一 段 代码 ， 将 参数 world 添加 到 原 数组 arrA 的 末尾 ， 并 返回 数组 的 长 度 ， 效 果 如 
图 14.23 所 示 。 
【分 析 】 本 题 主要 考查 读者 对 push0 方 法 的 掌握 程度 。 
【关键 代码 】 
var arrA = ["hello"]; 


Var arrE = arrA.push("world"); 
document.write("arrA=["+arrA+"], 数 组 长 度 : "+arrE+"<br>"); 


习题 14-2 请 分 析 下 面 代码 的 运行 结果 是 什么 。 

var arrA = ["a","b","e","d","e","F","j","h"]; 

var arrB = arrA.reverse(); 

document.write("arrB=["+arrB+"]"); 
【分 析 】 本 题 主要 考查 读者 对 reverse0 方 法 的 掌握 程度 。 

习题 14-3 ”使 用 JavaScript 代码 来 返回 当前 的 日 期 和 时 间 ， 效 果 如 图 14.24 所 示 。 
【分 析 】 本 题 主 要 考查 读者 对 Date 对 象 的 掌握 程度 。 


【关键 代码 】 
var today=new Date(); 
alert(" 现 在 的 时 间 是 : "+today); 
3 | 2 
rrrcsst p» x| OFasmrmitcsst. x 冰 
ER ED 
arrA=[hello, rorld], 数 组 长 度 ， 2 | 
| Cm | 
| ow » | : 二 一 
14.23 ”网 页 效果 图 14.24 网 页 效果 图 


习题 14-4 下面 给 出 一 段 代 码 ， 请 解释 该 段 代 码 的 含义 。 
alert(" 欢 迎 光临 ! 很 高 兴 见 到 你 ! ! 


全 


第 14 章 : 


【分 析 】 本 题 主 要 考查 读者 对 alert() 方 法 的 掌握 程度 。 该 段 代码 会 弹出 一 个 “欢迎 光临 ! ! 很 高 兴 
见 到 你 ! ! ”的 对 话 框 。 

习题 14-5 ”使 用 JavaScript 代码 设置 网 页 背景 为 蓝 色 ， 并 设置 网 页 中 文字 的 颜色 为 红色 ， 大 小 为 
20px， 效 果 如 图 14.25 所 示 。 
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图 14.25 ”网 页 效果 图 


【分 析 】 本 题 主要 考查 读者 对 document 对 象 的 掌握 程度 。 
【关键 代码 】 


<script language="javascript"> 
function bgDocument() 
{ 
document.bgColor="yellow"; 
document.fgColor="red"; 


} 
</script> 
<body onLoad="bgDocument()"> 
<font size="14px"> 欢 迎 光 临 一 一 很 高 兴 见 到 你 !!</font> 
</body> 


第 15S 章 了解 制作 页 面 的 工具 


制作 页 面 最 基本 的 工具 就 是 记事 本 ， 如 果 设 计 者 愿意 ， 完 全 可 以 用 记事 本 做 出 任何 页 面 。 事 实 上 ， 
很 多 人 也 是 这 样 做 的 。 但 是 为 了 提高 设计 者 的 工作 效率 ， 出 现 了 很 多 编辑 页 面 的 软件 ， 运 用 最 为 广泛 
的 是 Adobe 公司 的 一 系列 产品 ， 本 章 将 介绍 这 些 主流 的 网 页 编辑 工具 。 本 章 的 主要 知识 点 如 下 。 

使 用 Dreamweaver 工具 实现 页 面 开发 。 

了 解 Photoshop 。 

了 解 Flash 视频 文件 。 

了 解 Flash 工具 及 其 一 些 使 用 方法 。 


15.1 可 视 化 编辑 页 面 工具 一 一 Dreamweaver 


Dreamweaver 是 美国 Macromedia 公司 开发 的 集 网 页 制作 和 管理 网 站 于 一 体 的 所 见 即 所 得 的 网 页 编 
辑 器 。 强 大 全 面 的 功能 使 之 受到 许多 人 的 喜爱 ， 利 用 它 可 以 提高 制作 页 面 的 工作 效率 。 

在 早期 版 本 的 Dreamweaver 中 ， 制 作 页 面 虽 然 已 经 是 基于 CSS 样式 表 的 布局 ， 但 是 考虑 到 一 些 
老 用 户 ， 而 且 几 年 前 的 设计 页 面 思路 并 没有 如 今天 一 样 从 “HTML 制作 框架 、CSS 样式 表 来 修饰 ， 
JavaScript 来 发 挥 页 面 的 动态 效果 ”这 样 的 角度 出 发 , 所 以 还 是 体现 早期 用 表格 框架 来 布局 页 面 的 思路 。 

而 在 最 近 发 行 的 Dreamweaver CS6 版 本 中 ， 带 来 了 很 大 的 改变 。 最 明显 的 改变 是 设计 页 面 的 方式 
是 以 DIV+CSS 的 思路 为 出 发 点 的 ， 无 疑 新 版 本 的 Dreamweaver CS6 会 更 易 操 作 。 


15.1.1 了 解 Dreamweaver CS6 的 界面 


侣 4H 知识 点 讲解 光盘 \ 视 频 讲 解 \ 第 15 章 \ 了 解 Dreamweaver CS6 的 界面 ,wmv 

当 使 用 者 第 一 次 打开 Dreamweaver CS6 时 ， 软 件 会 要 求 使 用 者 选择 “创建 一 个 新 页 面 ”。 这 时 软 
件 会 给 出 多 种 不 同类 型 页 面 的 选择 项 ， 如 PHP、HTML 和 XML 等 。 事实 上 ， 对 于 初学 者 来 说 ， 设 计 
一 个 完整 的 页 面 ， 可 以 从 HTML 开始 。 一 个 基本 的 Dreamweaver CS6 的 界面 如 图 15.1 所 示 。 

大 体 上 整个 Dreamweaver 软件 主要 可 以 分 为 菜单 栏 、 工 具 栏 、 预 览 区 、 代 码 区 、 属 性 修改 编辑 栏 
和 侧 栏 。 从 图 15.1 中 可 以 很 容易 地 注意 到 最 显眼 的 两 个 部 分 ， 即 预览 区 和 代码 区 。Dreamweaver 最 大 
的 特色 就 在 于 当 设 计 者 在 代码 区 域内 写 入 完整 正确 的 HTML 代码 后 ， 在 预览 区 中 将 可 以 看 到 页 面 的 预 
览 样式 。 

在 编写 代码 时 ，Dreamweaver 会 选择 不 同 的 颜色 来 表示 不 同 的 功能 作用 的 代码 。 而 且 ， 软 件 中 预 
设 了 几乎 所 有 的 HTML 标签 和 CSS 样式 表 的 属性 。 所 以 ， 编 写 代 码 时 会 自动 生成 可 供 选择 的 属性 ， 这 
对 提高 设计 者 的 编写 速度 有 很 大 的 帮助 。 

虽说 在 预览 区 中 能 看 到 页 面 的 预览 效果 ， 但 是 由 于 页 面 在 不 同 的 浏览 器 中 效果 并 不 一 样 ， 所 以 有 


时 候 设计 者 还 是 不 得 不 在 浏览 器 中 查看 最 终 的 效果 。 
菜单 栏 
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图 15.1 Dreamweaver CS6 界面 


当选 中 页 面 中 某 一 个 页 面 对 象 时 , 如 文本 、 图 像 等 , 在 属性 修改 编辑 栏 中 ( 即 图 15.1 中 最 下 部 分 )， 
虽然 可 以 方便 地 通过 预 设 的 属性 项 目 对 页 面 内 容 进行 编辑 ， 但 并 不 是 一 个 制作 页 面 的 好 方法 ， 最 好 的 
方法 依然 是 手动 编写 CSS 样式 表 来 修饰 页 面 的 内 容 。 而 通过 属性 面板 修改 页 面 对 象 时 ， 会 很 容易 出 现 
难以 预料 的 烦琐 代码 ， 这 会 让 整个 页 面 源 码 显得 很 糟糕 。 

界面 中 的 侧 栏 中 有 一 些 属性 修改 的 面板 ， 这 个 位 置 中 有 一 个 非常 显眼 的 部 分 : CSS 样式 表 信 息 属 
性 编辑 面板 ， 如 图 15.1 中 右 侧 所 示 。 在 这 个 窗口 中 ， 在 空白 地 方 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “新 
建 ” 命 令 ， 设 计 者 就 可 以 方便 地 制定 样式 表 ， 如 图 15.2 所 示 。 
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图 15.2 CSS 样式 表 编 辑 器 
在 这 个 编辑 器 中 ， 当 需要 创建 样式 表 时 ， 会 弹出 如 图 15.2 中 下 方 的 窗口 ， 使 用 者 可 以 在 这 里 方便 


_ 国 


CSS 网页 设计 详 名 


地 选择 需要 修改 的 属性 。 这 令 初 学 者 也 可 以 很 容易 地 上 手 操作 。 


说 明 : Dreamweaver 软 件 的 使 用 不 是 本 书 的 重点 ， 故 只 作 入 门 介绍 。 有 兴趣 的 读者 可 以 参阅 一 些 关 于 
Dreamweaver 的 书籍 。 


15.1.2” Dreamweaver 的 菜单 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \Dreamweaver 的 菜单 .wmv 
图 15.1 中 的 Dreamweaver 界面 ， 顶 部 是 菜单 栏 ， 大 部 分 软件 中 都 是 这 样 。Dreamweaver 中 主要 的 
菜单 栏 如 下 。 

文件 : 在 这 个 菜单 下 可 以 进行 打开 、 新 建 和 保存 等 基本 的 操作 ， 同 时 也 有 一 些 导 入 、 导 出 其 他 素 
材 等 功能 。 

编辑 :在 这 个 菜单 下 可 以 编辑 对 页 面 的 操作 动作 ， 如 一 些 基本 的 复制 、 删 除 和 粘贴 等 。 

查看 : 在 这 个 菜单 下 可 以 对 页 面 的 显示 方式 进行 编辑 。 如 使 用 尺寸 、 网 格 线 这 样 的 功能 来 编辑 页 
面 布局 。 

插入 : 在 这 个 菜单 下 可 以 在 页 面 中 插入 不 同 的 页 面 文件 ， 如 图 像 、 表 格 、 超 链接 或 者 是 表单 等 。 

修改 : 在 这 个 菜单 下 可 针对 页 面 中 不 同 的 对 象 进行 修改 ， 如 修改 表格 的 行列 属性 、CSS 样式 表 的 
属性 等 。 

命令 : 这 个 菜单 下 可 以 预先 设置 好 一 组 命令 ， 当 对 不 同 对 象 使 用 相同 操作 时 ， 可 以 无 需 再 次 重复 
编辑 。 

站 点 : 用 来 连接 和 管理 服务 器 。 

窗口 : 控制 在 界面 中 打开 不 同 的 窗口 。 

帮助 : 这 里 可 以 通过 连接 互联 网 查找 一 些 关 于 Dreamweaver 的 使 用 资料 。 


15.2 神奇 的 “美工 笔 ” 一 一 Photoshop 


对 于 前 端 页 面 开 发 者 来 说 ， 在 拥有 布局 页 面 能 力 的 同时 ， 能 够 编辑 图 像 是 更 理想 的 。 在 诸多 图 像 
编辑 的 软件 中 ，Photoshop 享誉 业界 ， 设 计 者 常用 的 一 种 方法 是 在 Photoshop 中 做 好 页 面 的 设计 图 ， 然 
后 放 到 Dreamweaver 中 进行 编辑 。 本 节 将 介绍 如 何 使 用 Photoshop 的 基本 功能 。 


15.2.1 了 解 Photoshop 的 界面 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 15 章 \ 了 解 Photoshop 的 界面 .wmv 

由 于 Photoshop 和 Dreamweaver 现在 同属 于 Adobe 公司 ， 所 以 它们 在 界面 上 样式 十 分 类 似 ， 如 
图 15.3 所 示 。 在 写本 书 时 ，Photoshop 的 最 新 版 本 是 Photoshop CS6。 

从 界面 上 可 以 看 出 ，Photoshop 基本 上 也 是 具备 菜单 栏 、 工 具 栏 和 工作 区 域 ， 即 图 中 的 图 像 窗口 和 
侧 栏 。 相 对 于 Dreamweaver 而 言 ，Photoshop 并 没有 特别 多 的 选项 。 当 然 ， 这 不 是 说 Photoshop 的 功能 
不 够 强大 ， 实 际 上 它 可 以 做 出 任何 能 想象 的 图 像 。 这 里 简单 介绍 一 下 Photoshop 的 常用 菜单 。 
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图 15.3 Photoshop CS6 界面 


文件 :作用 如 Dreamweaver 软件 ， 可 实现 一 些 基本 的 功能 ， 如 保存 、 打 开 图 像 、 导 入 导出 等 。 

编辑 ;同样 具备 Dreamweaver 的 菜单 中 编辑 的 功能 ， 只 是 作用 于 不 同 的 对 象 ， 此 外 ， 还 有 专属 于 
Photoshop 的 编辑 工具 栏 中 的 一 些 功能 。 

图 像 :在 这 个 菜单 中 可 以 修改 图 像 的 大 小 、 画 布 的 大 小 等 。 

图 层 : 在 这 个 菜单 中 可 以 使 用 于 图 层 的 一 些 编辑 方法 。 图 层 是 Photoshop 中 一 个 重要 的 功能 。 

选择 : 选取 编辑 对 象 。 

滤 镜 : 对 所 选 对 象 进行 效果 编辑 ， 这 是 Photoshop 中 十 分 有 魅力 的 一 项 功能 ， 它 可 以 令 设 计 者 的 图 
像 展示 出 难以 想象 的 奇特 效果 。 

视图 : 可 以 选择 如 标尺 、 网 格 等 特殊 工具 来 划分 图 像 中 不 同 的 位 置 。 

窗口 : 选择 在 界面 中 显示 或 者 隐藏 部 分 功能 的 窗口 。 

帮助 : 可 以 通过 互联 网 查找 一 些 关 于 如 何 使 用 Photoshop 的 资料 。 


15.2.2 ”Photoshop 的 使 用 技巧 


分 4 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 15 章 \Photoshop 的 使 用 技巧 .wmv 

使 用 Photoshop 时 ， 可 以 通过 工具 来 完成 大 部 分 操作 。 而 在 Photoshop 中 ， 这 些 主要 工具 放 在 工具 
栏 中 ， 显 示 在 整个 软件 界面 的 左 侧 ， 如 图 15.4 所 示 。 

Photoshop 提供 的 工具 并 不 多 ， 但 是 能 够 做 出 任何 可 以 想象 出 来 的 图 像 。 使 用 Photoshop 编辑 创建 
图 像 完全 可 以 认为 是 一 门 博大 精深 的 艺术 学 科 。 如 图 15.4 所 示 ， 其 中 14 号 位 置 是 画笔 工具 , 可 以 描绘 
出 千姿百态 的 图 像 。8 号 位 置 是 钢笔 工具 ， 可 以 建立 任何 形状 的 图 像 轮 廊 。19 号 位 置 的 是 文字 工具 ， 
可 以 在 图 像 中 添加 文本 。 


说 明 : Photoshop 的 内 容 已 经 超出 了 本 书 的 范畴 ， 这 里 只 作 简 单 介绍 ， 目 的 是 为 了 帮助 初学 者 有 个 基本 
的 概念 。 有 兴趣 的 读者 可 以 去 查阅 更 多 的 关于 Photoshop 的 书籍 。 


| 


| 
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在 很 多 时 候 ， 设 计 者 制作 网 页 时 不 可 能 每 一 个 元 素 都 是 从 零 开始 创新 。 例 如 ， 改 变 一 幅 图 像 的 部 
分 内 容 ， 显 然 不 可 能 重新 再 去 制作 一 幅 基 本 差不多 的 图 像 。 而 比较 好 的 方法 是 在 原先 图 像 的 基础 上 进 
行 修改 。 又 如 ， 当 设计 者 只 需要 一 个 图 像 中 部 分 内 容 时 ， 只 要 在 素材 上 截取 就 可 以 了 。 

通过 图 15.4 中 工具 栏 中 的 工具 ， 可 以 对 图 像 进 行 一 些 基本 的 简单 操作 。 这 里 介绍 一 种 很 实用 的 技 
巧 一 一 截取 图 像 的 技巧 。 下 面 先 看 如 图 15.5 所 示 的 一 幅 图 像 。 
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图 15.4 Photoshop 工具 栏 图 15.5 施工 1png 


这 是 一 张 来 自 于 互联 网 的 图 像 ， 这 里 希望 将 “施工 标志 ”的 部 分 为 已 所 用 ， 让 它 来 点 缀 页 面 ， 那 
么 ， 该 如 何 通过 Photoshop 来 实现 呢 ? 

首先 ， 在 Photoshop 中 打开 这 张 图 像 。 为 了 截取 这 部 分 图 像 ， 可 以 使 用 几 种 工具 。 在 图 15.4 中 ，1 
号 位 置 的 工具 是 选择 工具 ， 可 以 设置 成 矩形 选 框 、 椭 圆 形 选 框 等 。 当 选择 好 局 部 图 像 之 后 ， 可 以 通过 
剪 切 或 者 复制 这 部 分 图 像 ， 然 后 放 在 新 的 图 层 中 ， 最 后 保存 这 个 图 层 就 可 以 了 ， 如 图 15.6 所 示 。 


GRCONSTRUCTIO, 


15.6 ”建立 新 选区 的 “施工 标志 ” 


此 外 ， 还 有 一 种 更 直接 的 方法 ， 使 用 工具 栏 中 3 号 位 置 的 截取 工具 ， 可 以 直接 将 画布 截取 出 来 ， 
如 图 15.7 所 示 。 


说 明 : 画布 和 图 像 是 两 个 概念 ， 画 布 指 图 片 的 整体 大 小 ， 图 像 指 图 片 中 内 容 部 分 的 大 小 。 


@ 
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图 15.7 使 用 截取 工具 建立 新 图 像 
说 明 : 如 果 最 终 得 到 的 图 像 大 小 依然 无 法 令 设 计 者 满意 ， 可 以 使 用 CtrlHT 快 捷 键 来 改变 图 像 的 大 小 。 
将 截 选 出 来 的 图 像 另 存 为 适合 的 格式 ， 如 :jpg、.png 等 ， 就 可 以 放 在 网 页 中 使 用 了 。 


15.3 ”网 页 中 的 动画 一 一 Flash 


Flash 是 一 种 文件 ， 同 时 也 是 同属 于 Adobe 公司 的 一 款 软件 。 当 然 ， 它 的 作用 就 是 制作 Flash 文件 。 
但 由 于 现今 Flash 文件 的 应 用 范围 很 广泛 , 所 以 Flash 软件 不 仅 可 以 制作 有 简单 动画 效果 的 Flash 文件 ， 
也 可 以 制作 出 精美 的 动态 页 面 。 


15.3.1 认识 Flash 文件 


鳃 中 知识 点 讲解 :光盘 \ 视 频 讲 解 \ 第 15 章 \ 认 识 Flash 文件 .wmv 
Flash 最 初 给 人 的 印象 就 是 比 GIF 格式 更 漂亮 一 些 的 动画 。Flash 是 目前 最 为 流行 的 一 种 矢量 动画 
格式 文件 ， 其 优点 在 于 使 用 向 量 运算 ( Vector Graphics ) 的 方式 ， 产 生出 来 的 影片 占用 存储 空间 较 小 。 
Flash 文件 的 格式 后 级 名 是 .swf， 如 果 需 要 在 页 面 中 加 载 Flash 文件 ， 则 需要 有 特殊 的 播放 器 支持 。 
Flash 发 展 至 今 ， 所 能 做 的 已 经 不 再 仅仅 是 一 个 小 小 的 页 面 动 画 。 其 结合 ActionScript 语言 的 对 象 
和 流程 控制 ， 已 经 完全 可 以 制作 和 用 户 互 动 的 前 端 页 面 ， 甚 至 可 以 制作 出 简单 的 游戏 。 
后 级 名 为 .fla 的 文件 : 如 果 制 作 一 个 Flash 动画 ， 只 能 通过 Flash 的 源 文 件 。 源 文 件 的 后 级 名 是 fla， 
在 Flash 软件 中 可 以 编辑 这 种 格式 的 文件 。 由 于 浏览 器 并 不 支持 这 种 格式 ， 所 以 .fla 格式 的 文 
件 是 不 能 放 入 页 面 中 使 用 的 。 
后 缀 名 为 .swf 的 文件 ， 放 入 到 页 面 中 的 Flash 文件 ， 其 格式 后 缀 名 是 .swf， 这 是 将 .fla 格式 的 文件 
经 过 压缩 得 到 的 一 种 小 容量 的 Flash 文件 格式 。 


15.3.2 ”在 页 面 中 放 入 Flash 文件 


鳃 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 15 章 \ 在 页 面 中 放 入 Flash 文件 .wmv 

在 页 面 中 放 入 Flash 文件 不 会 太 困 难 。 从 某 个 角度 来 说 ， 它 的 原理 和 放 入 一 张 图 像 ， 一 段 GIF 动 
画 是 一 样 的 。 所 不 同 的 是 ， 如 果 在 页 面 中 放 入 Flash 文件 ， 用 户 却 未 必 能 够 看 到 所 希望 的 结果 ， 原 因 在 
于 Flash 文件 需要 特定 的 播放 器 来 加 载 文件 ， 如 Flash Player。 为 此 ， 可 以 通过 一 个 简单 的 JavaScript 


INMUYCSS 网 页 设计 详 角 


程序 来 下 载 ， 使 浏览 器 支持 Flash 文件 的 插件 ， 代 码 如 下 所 示 : 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
在 页 面 源码 <head> 标 签 内 声明 引用 了 这 样 一 个 js 外 部 文件 ， 这 个 小 程序 的 作用 就 是 令 浏 览 器 下 载 
支持 Flash 文件 的 swflash.cab 插件 。 同 时 这 个 外 部 文件 也 可 以 防止 在 不 同 的 浏览 器 中 出 现 不 同 的 结果 。 
在 这 段 代码 中 声明 了 下 载 令 浏览 器 支持 Flash 文件 的 小 插件 ,这 样 设计 者 就 可 以 在 页 面 中 加 载 Flash 


文件 了 。 


这 里 要 通过 一 个 <object> 标 签 来 将 对 象 放 入 页 面 中 。 具 体 如 实例 15-1 所 示 ， 这 是 通过 <object> 


标签 将 Flash 放 入 页 面 中 的 方法 。 
【实例 15-1】 本 实例 通过 <object> 标 签 将 Flash 放 入 页 面 中 。 


re | 实例 15-1: 通过 <object> 标 签 将 Flash 放 入 页 面 中 


源码 路 径 : 光盘 \ 源 文件 \15\15-1.html 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 通 过 <object> 标 签 将 Flash 放 入 到 页 面 中 </title> 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
</head> 
<| 
<h1> 这 里 是 一 个 Flash 文件 </h1> 
<script type="text/javascript"> 
AC_FL_RunContent( 
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version 
=9,0,28,0","width','550','height','450','title','Endf ,'src','end','quality','high','pluginspage','http://ww 
w.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi 
e','end' ); 
llend Ac code 
</script> 
<noscript> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave 
lcabs/flash/swflash.cab#versio=9,0,28,0" width="550" height="450" title="End"> 
<|- 插 入 Flash 文件 -> 
<param name="movie" value="end.swf" /> 
<param name="quality" value="high" /> 
< embed src="end.swf" quality="high" 
pluginspage="http://www.adobe.com/shockwave/download/download.cgi? 
P1_Prod_Version=ShockwaveFlash" ="application/x-shockwave-flash" 
width="550" height="450"></embed> 
</object> 
</noscript> 
</body> 
</html> 


【运行 程序 】 最 终 在 页 面 中 的 效果 如 图 15.8 所 示 。 
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这 里 是 一 个 Flash 文 件 


15.8 将 Flash 放 入 页 面 中 


【深入 学 习 】 第 19 行 代 码 是 <object> 标 签 的 起 始 ， 其 中 CLSID 是 class ID 的 缩写 。 对 于 每 个 组 件 
类 ， 都 需要 分 配 一 个 唯一 表示 它 的 代码 ， 就 是 ID。 为 了 避免 冲突 ， 微 软 使 用 GUID 作为 CLSID。GUID 
的 函数 主要 是 根据 当时 的 时 间 、 机 器 地 址 等 信息 而 动态 产生 ， 这 样 在 理论 上 可 保证 全 球 唯一 。 所 以 那 
一 串 数字 就 是 ID 号 。 

<object> 标 签 中 可 以 加 入 width 或 者 height 属性 来 修改 播放 窗口 的 大 小 。 当 然 ， 如 果 使 用 样式 表 设 
计 者 可 以 做 到 更 多 不 同样 式 的 窗 体 表 现 。 第 20 行 代码 中 codebase 是 指 一 个 程序 集 的 位 置 ， 通 过 设置 
href 特性 告知 运行 库 按照 给 定 的 URL 来 查找 程序 集 。 这 里 引用 到 Macromedia 的 一 个 页 面 ， 其 功能 是 
加 载 Flash 播放 器 。 

从 第 23 行 代码 开始 ，<param> 标 签 来 确定 对 象 的 更 多 细节 ，<param> 标 签 中 关联 两 个 属性 , 分 别 是 
name 和 value。name 属性 是 用 来 区 别 不 同 的 <param> 标 签 ， 如 代码 写 为 “<param name="movie">” 和 
“<param name="balance">”， 这 样 就 是 两 个 不 同 的 <param> 标 签 。name 属性 关联 不 同 的 value 值 ， 这 
样 就 分 开 了 不 同 的 作用 ， 如 实例 15-1 中 第 23 行 和 第 24 行 所 示 。 第 23 行 代码 表明 了 引用 的 Flash 文件 
的 位 置 ， 第 24 行 代 码 表明 它 的 画面 质量 是 “高 ”级 别 的 。 当 设置 为 不 同 的 name 属性 时 ， 可 以 触发 不 
同 的 作用 ， 如 表 15.1 所 示 。 


表 15.1 <param> 中 name 和 value 的 设置 方法 


name value 


作 用 


引用 一 个 Flash 文件 


movie | some.swf 


Playcount | n 表示 循环 播放 n 次 

autostart 上 1 或 者 0 1 表示 页 面 打 开 自动 播放 ，0 表示 需要 单 击 播放 

clicktoplay | 1 或 者 0 1 表示 允许 播放 和 暂停 动画 ，0 表示 禁用 此 项 功能 

displaysize |0、1 或 者 2 | 控制 播放 画面 ，x-0， 原 始 大 小 : x=1， 一 半 大 小 : x=2，2 倍 大 小 


enablefullscreen controls | 1 或 者 0 
enabled 


控制 切换 全 屏 : x=1， 人 允许 切换 为 全 屏 ，x=0， 禁 用 此 功能 
1 表示 可 以 人 为 控制 播放 器 ，0 则 表示 不 允许 


ss Raat 


续 表 
name value 作 用 
fullScreen 1 或 者 0 1 表示 全 屏 ，0 则 不 是 
full 
i mini 播放 器 显示 模式 ，full 为 显示 全 部 ;mini 为 最 简化 ，none 为 不 显示 播放 控制 ， 
none 只 显示 视频 窗口 ，invisible 为 全 部 不 显示 
invisible 
defaultFrame 1 或 者 0 显示 默认 框架 
rate 允许 小 数 播放 速率 控制 ，1 为 正常 ，1.0+ 则 变 快 ， 反 之 变 慢 
volume 百分比 正常 声音 大 小 是 100% 
mute 1 或 者 0 1 表示 正常 ，0 表示 静音 


说 明 : 第 25 ~ 28 行 代码 中 ， 在 <embed> 标 签 中 的 内 容 实 际 上 的 作用 和 前 面 的 <object> 部 分 是 一 样 的 ， 只 
是 它 是 为 了 一 些 不 支持 <object> 标 签 而 存在 的 。 现 在 <embed> 标 签 已 经 渐渐 地 被 淘汰 了 。 


15.3.3 制作 Flash 的 软件 


名 中 知 识 点 讲解 光盘 \ 视 频 讲解 \ 第 15 章 \ 制 作 Flash 的 软件 .wmv 

之 前 已 经 见识 了 同属 于 Adobe 公司 的 Dreamweaver 和 Photoshop 软件 ， 前 者 用 来 制作 页 面 ， 后 者 
用 来 制作 静 帧 图 像 。 而 本 节 介绍 的 同样 是 Adobe 公司 的 Flash 8 软件 ， 如 图 15.9 所 示 ， 它 是 用 来 专门 
制作 Flash 的 软件 。 


图 15.9 Flash 8 软件 界面 


技巧 : Flash 8 看 上 去 比 Dreamweaver 和 Photoshop 都 要 复杂 。 这 是 因为 Flash 文 件 制作 时 ， 牵 涉 “ 时 间 ” 
这 样 的 概念 , 动画 是 有 时 间 长 度 的 。 所 以 Flash 8 中 有 属于 自己 特有 的 一 个 时 间 轴 窗口 ， 如 图 15.9 
中 标注 所 示 。 其 他 部 分 Dreamweaver 和 Photoshop 都 是 比较 相似 的 ， 例 如 ， 菜 单 栏 、 工 具 栏 和 一 
些 常用 的 窗口 排列 在 侧 栏 。 


全 
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15.3.4 Flash 8 的 菜单 


名 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \Flash 8 的 菜单 .wmv 
由 于 Flash 8 也 属于 Adobe 公司 ，Flash 8 的 菜单 分 类 类 似 于 Dreamweaver 和 Photoshop。 下 面 分 别 
对 各 菜单 进行 介绍 。 
文件 :进行 打开 、 保 存 文件 等 基本 操作 。 
编辑 :对 Flash 构成 的 图 像 进行 编辑 的 操作 。 
视图 : 使 用 一 些 测量 方式 来 定位 编辑 对 象 的 位 置 。 
插入 : 插入 时 间 轴 ， 这 是 Flash 8 特有 的 一 项 功能 。 时 间 轴 是 控制 动画 的 一 项 重要 的 工作 区 域 。 
修改 : 针对 于 Flash 中 的 元 素 进行 修改 。 如 位 图 、 元 件 和 时 间 轴 等 。 
文本 : 编辑 文本 的 字体 等 属性 。 
命令 : 通过 调用 预先 设置 好 的 命令 进行 快速 操作 。 
控制 : 控制 Flash 文件 最 终 的 预览 效果 。 
窗口 : 选择 出 现在 软件 界面 中 的 工具 窗口 。 
帮助 : 可 以 通过 互联 网 查找 相关 Flash 8 的 资料 。 
注意 : 其 实 无 论 Dreamweave、Photoshop, 还 是 Flash 8， 它 们 基本 的 操作 对 象 大 部 分 都 属于 图 像 、 文 本 。 
只 是 在 不 同 的 环境 中 需要 不 同 的 方法 来 操作 对 象 。 所 以 这 3 种 软件 在 大 部 分 的 功能 对 象 上 都 具有 
很 大 的 类 似 性 。 


15.3.5 ”Flash 8 的 主要 功能 


对 


全 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \Flash 8 的 主要 功能 .wmv 
Flash 8 的 工具 栏 界面 和 Photoshop 工具 栏 大 同 小 异 。 当 然 ， 由 于 Flash 2 让 由 
文件 主要 是 由 矢量 图 形 构成 ,所 以 这 些 工 具 在 使 用 的 时 候 也 会 有 不 同 的 感觉 ， 3 A 
如 图 15.10 所 示 ,这些 工 具 也 能 完成 矢量 图 形制 作 。 但 是 Flash 软件 主要 的 功 50 15 
能 并 非 用 于 设计 静 帧 图 像 ， 而 是 一 方面 用 于 制作 矢量 图 形 的 动画 ， 另 一 方面 6 fi 内 
可 实现 Flash 组 件 的 交互 来 制作 页 面 ， 这 需要 了 解 ActionScript 语言 。 822 18 
下 看 
说 明 : 制作 Flash 不 在 本 书 讨论 的 范围 之 内 ， 有 兴趣 的 读者 可 以 参考 相关 类 别 9 SS 四 
的 书籍 。 zl 
必 
15.3.6 ”Flash 的 常用 交互 技巧 二 
加 


鳃 il 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \Flash 的 常用 交互 技巧 :wmv 

目前 主流 网 站 中 ， 都 具备 给 页 面 添加 视频 的 功能 ， 这 就 是 通过 Flash 组 
件 来 实现 的 。 在 了 解 如 何 添 加 视频 的 方式 之 前 ， 要 明白 什么 是 视频 文件 。 平 “图 1510 Flash8 工具 栏 
时 生活 中 ， 人 们 看 的 DVD、 摄像 机 拍摄 的 视频 片段 ， 或 者 是 数码 相机 拍摄 的 短片 、 网 络 上 下 载 的 影片 
等 ， 这 些 视频 绝 大 多 数 是 以 avi、rmvb 或 mov 等 为 后 绥 名 的 文件 。 

但 是 ， 这 些 文件 容量 较 大 ， 不 适合 加 载 到 页 面 中 使 用 ， 直 到 FLV 文件 出 现 。FLV 视频 格式 占有 率 


全 
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低 、 视 频 质量 尚 可 ， 但 体积 相当 小 ， 这 些 特 点 尤其 适合 被 加 载 在 网 络 中 。 所 以 FLV 视频 文件 是 目前 网 
络 视 频 的 主流 文件 。 

FLV 就 是 随 着 Flash 软件 发 展 而 来 的 视频 格式 ， 目 前 被 众多 新 一 代 视频 分 享 网 站 所 采用 。 它 是 
前 增长 最 快 、 应 用 最 为 广泛 的 视频 传播 格式 , 是 在 sorenson 公司 的 压缩 算法 的 基础 上 开发 出 来 的 。FLV 
格式 不 仅 可 以 轻松 地 导入 Flash 中 ,并 且 能 起 到 保护 版 权 的 作用 ,而 且 可 以 不 通过 本 地 的 微软 或 者 REAL 
播放 器 也 可 播放 视频 。 

接 下 来 通过 Flash 8 来 了 解 如 何 实 现在 页 面 中 添加 视频 文件 。 打 开 Flash 8， 新 建 一 个 Flash 文档 ， 
如 图 15.11 所 示 。 


图 15.11 打开 Flash 8 的 界面 


在 “文件 ”菜单 下 新 建 一 个 大 小 为 400X300 的 图 层 。 这 里 可 以 在 新 建 好 的 图 层 的 编辑 视窗 中 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 “文档 属性 ”命令 修改 图 层 大 小 。 在 “窗口 ”菜单 下 打开 “Flash 组 件 ” 窗 口 ， 
或 者 通过 快捷 键 Ctl+F7 打开 组 件 窗口 ， 然 后 将 “组 件 ” 中 的 FLVPlayback 拖 入 编辑 窗口 ， 这 是 一 个 播 
放 器 的 功能 ， 如 图 15.12 所 示 。 


| 
图 15.12 放 入 FLV 播放 器 


第 15 章 了 解 制作 页 面 的 工具 


接着 要 在 播放 器 中 放 入 准备 好 的 FLV 视频 文件 ， 先 选中 编辑 窗口 ， 在 属性 面板 中 打开 “参数 ” 面 
板 ， 如 图 15.13 所 示 。 


组 件 [autoplay true .| 
[本 |autoRewind true 加 
|autoSize false 
帘 :320.0 X374 ||bufferTime 01 © 
® W200 y:25.4 ||contentpath 
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图 15.13 播放 器 的 参数 设置 
说 明 : 在 “属性 ”面板 中 ， 还 可 以 修改 播放 器 窗口 的 大 小 等 属性 。 


此 时 ， 需 要 通过 设置 “属性 ”面板 中 的 “参数 ”数值 ， 即 图 15.13 中 下 面 的 部 分 。 选 择 contentPath 
选项 , 表示 添加 FLV 视频 文件 的 路 径 。 这 里 放 入 事先 准备 好 的 文件 end.flv， 接 着 在 skin 选项 中 选择 添 
加 播放 控制 按钮 的 样式 。 最 后 选择 “文件 ”| “导出 ”|“ 导 出 影片 ”命令 , 即 保存 成 后 级 为 .swf 的 Flash， 
把 这 个 Flash 视频 加 载 到 页 面 中 ， 这 样 就 完成 了 在 一 个 页 面 中 加 载 视频 的 过 程 。 


15.4 案例 : 使 用 Dreamweaver 制作 页 面 


贸 m 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \ 案 例 : 使 用 Dreamweaver 制作 页 面 .wmv 

在 本 章 的 最 后 将 通过 一 个 实例 来 展示 如 何 合理 使 用 Dreamweaver 创建 页 面 。Dreamweaver 中 包含 
了 大 部 分 主流 布局 的 框架 ， 其 相当 杰出 的 一 点 是 它 的 模板 设计 ， 如 图 15.14 所 示 。 

(1) 选择 “文件 ” | “新 建 ”命令 ， 弹 出 模板 菜单 选择 界面 。 从 模板 菜单 选项 中 可 以 看 到 有 很 多 不 
同类 型 的 布局 模板 。 这 里 选择 的 是 一 个 普通 的 左右 分 栏 和 上 下 分 栏 的 布局 结构 。 创 建 好 之 后 ， 可 以 在 
可 视 编辑 窗口 中 看 到 已 经 生成 的 代码 和 页 面 结构 ， 如 图 15.15 所 示 。 
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图 15.14 ” Dreamweaver 的 选择 布局 界面 
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15.15 ”创建 好 的 页 面 布局 


(2) 如 图 15.15 所 示 ， 软 件 界面 中 ， 左 边 是 代码 生成 的 地 方 ， 而 在 右边 是 可 预览 的 最 终 效果 ， 按 
下 了 Fl12 键 ， 可 以 查看 在 浏览 器 中 的 预览 效果 ， 如 图 15.16 所 示 。 


注意 : 只 是 这 样 简单 地 使 用 Dreamweaver 就 希望 能 够 成 为 一 个 尖端 页 面 开发 高 手 显然 是 不 够 的 。 当 软件 
为 使 用 者 快速 补 全 代码 的 同时 ,作为 使 用 者 , 需要 能 够 很 好 地 理解 Dreamweaver 生 成 的 代码 。 否 
则 很 容易 令 页 面 充 满 大 量 的 垃圾 代码 。 
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说 明 A 


请 注意 这些 市 局 的 CSS 带 有 大 量 广 释 。 如 果 你 的 大 敦 分 工作 部 在 灵 计 视 加 
本 ， 沪 快 训 浏 览 一 下 代码 ， 获 取 有 关 知 馈 使 用 液态 布局 CSS 的 提示 。 介 可 以 
况 毕 福 释 ， 焙 后 启动 你 的 站 点 。 要 了 入 有 关 这 些 CSS 市 局 中 使 用 的 方法 的 更 直 
羡 。 请 阅读 Adobe 开发 人 员 中 心 上 的 以 下 文章 
http://www.adobe.com/go/adc_css layouts. 


清除 


由 于 所 有 列 都 是 学 动 的 , 因此 ， 此 市 局 对 -container 采用 overflow :hidden 

请 际 方法 强制 使 .container 了 解 列 的 结束 位 置 ， 以 便 显 示 在 .container 中 刘 | 
十 何 这 村 开 有 姑 和 色 。 如 虚 有 任何 大 型 元 素 突 出 到 .container 以 外 ， 该 元 素 丰 
时 次 被 零 断 。 您 也 不 表 使 用 负 边 距 或 具有 负 值 的 绝对 定位 将 元 要 拉 至 .contair| 
外 ,这 些 元 条 同样 不 寺 在 .container 之 外 显示 


如 昌 世 震 要 读 月 这 些 局 性 ， 刚 震 要 采用 其 它 清除 方法 。 最 可 竺 的 方法 足 在 最 后 
动 列 之 后 (但 在 .container 结 更 之 前 ) 添加 <br class="clearfloat" /> 或 
dlass="clearfloat"> </dlv>。 这 县 有 相同 的 消 际 巷 果 : 


脚注 

在 列 后 面 《 但 仍 在 .container 内 》 和 加 半 汪 将 导致 此 overflow:hidden 生 

a 侍 可 以 符 .footer 站 到 种 一 个 .container 之 外 的 另 一 个 .contalner 中 
不 全 影响 过 最. 这 的 和 人 是 从 二 有 各 和 和 各 市 对 地， 然后 好 | 际 标题 

市 忆 关 开 中 利 有 请 方法 。 

Internet Explorer 杀 件 注释 

这 些 济 贡 布 局 包含 Internet Explorer 条 件 注 释 (1ECC)， 用 干 更正 两 个 同 是 


1. 在 基于 百分比 B 布 局 中 ,浏览 器 在 滥 入 div 大 小 方面 不 一 至 。 如果 浏览 器 i| 
现 请 各 144.5px 或 564.5px 之 类 的 数字 见 这 着 村 这 的 于 合 人 到 过 所 
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图 15.16 在 浏览 器 中 的 预览 结果 
15:5. 结 


本 章 主 要 是 简单 地 介绍 一 下 目前 主流 商业 化 网 站 创建 的 “利器 ”。 需 要 有 这 样 的 概念 ， 就 是 软件 
始终 只 是 一 种 辅助 性 工具 ， 要 做 好 前 端 页 面 的 设计 工作 ，HTML+CSS 的 基础 知识 是 非常 重要 的 。 只 有 
在 理解 的 基础 上 再 去 创新 ， 才 能 创造 出 优秀 的 页 面 ， 而 不 是 一 旦 脱离 了 辅助 工具 ， 就 变 得 手足 无 措 。 
本 章 的 主要 内 容 有 : 

了 解 Dreamweaver 是 一 种 可 视 化 的 页 面 开发 工具 。 只 有 在 了 解 HTML 语言 的 基础 上 ， 使 用 

Dreamweaver 才能 发 挥 作用 。 否 则 ， 反 而 会 给 设计 者 带 来 更 多 的 麻烦 。 

了 解 Photoshop 是 用 来 制作 图 像 的 工具 。 通 过 Photoshop 软件 ， 可 以 完成 页 面 中 图 像 的 设计 、 编 辑 

工作 。 

了 解 Flash 视频 文件 的 特性 以 及 Flash 软件 是 开发 这 种 文件 的 工具 。Flash 软件 可 以 将 .flv 格式 的 文 

件 导出 为 .swf 文件， 并 将 之 放 入 页 面 中 。 
在 之 后 的 章节 中 ， 会 通过 几 个 综合 性 的 例子 ， 纵 观 一 个 整体 的 页 面 开发 是 如 何 实现 的 。 


15.6 本 章 


习题 15-1 常见 的 制作 网 页 的 工具 是 什么 ， 由 哪 几 部 分 组 成 ? 


CSS nx tx 
【分 析 】 本 题 主 要 考查 读者 对 Dreamweaver 的 掌握 程度 。 
习题 15-2 常见 的 制作 图 像 图 形 的 软件 是 什么 ， 由 哪 几 部 分 组 成 ? 
【分 析 】 本 题 主要 考查 读者 对 Photoshop 的 掌握 程度 。 
习题 15-3 ”常见 的 制作 动画 的 软件 是 什么 ? 


【分 析 】 本 题 主要 考查 读者 对 Flash 的 掌握 程度 。 
习题 15-4 ”下面 给 出 一 张 图 片 ， 如 图 15.17 所 示 ， 请 读者 在 Photoshop 中 把 图 中 的 花瓶 和 花 截 取 


出 来 。 
【分 析 】 本 题 主要 考查 读者 对 Photoshop 的 掌握 程度 ， 可 以 参考 15.2.2 节 来 进行 截图 。 
习题 15-5 ”打开 Dreamweaver CS6， 在 Dreamweaver 中 创建 一 个 简单 的 页 面 ， 设 置 背景 颜色 为 蓝 


色 ， 文 本 为 红色 ， 效 果 如 图 15.18 所 示 。 
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15.18 ”设置 简单 网 页 


图 15.17 图 片 效果 
【分 析 】 本 题 主要 考查 读者 对 使 用 Dreamweaver 创建 网 页 的 掌握 程度 。 在 Dreamweaver 中 新 建 一 
个 HTML 文件 ， 然 后 在 <body> 中 输入 文字 ; 在 “属性 ”面板 中 选择 “页 面 属性 ”， 在 页 面 属性 中 设置 


背景 颜色 和 文本 颜色 。 


第 4 篇 页 面 实 战 篇 


有 了 前 三 篇 内 容 的 讲解 ， 相 信 读 者 已 经 对 网 页 制作 各 项 必 备 知识 有 了 充 
分 的 认识 。 本 篇 将 向 读者 展现 四 个 网 站 的 制作 过 程 。 通 过 本 篇 的 学 习 ， 读 者 
可 以 管 中 帘 鹏 ， 了 解 网 站 实际 设计 的 流程 和 技巧 。 

第 16 章 综合 案例 1: 制作 主流 网 站 界面 

第 17 章 综合 案例 2: 设计 复杂 页 面 

第 18 章 ”综合 案例 3: 制作 英文 网 站 

第 19 章 综合 案例 4: 使 用 Dreamweaver 制作 中 文 网 站 
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第 16 章 综合 案例 1: 制作 主流 网 站 界面 


僵 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 16 章 \ 综 合 案例 1: 制作 主流 网 站 界面 .wmv 


re 案例 1: 制作 主流 网 站 界面 
源码 路 径 : 光盘 \ 源 文件 \16\ 案 例 1.html 


本 章 将 综合 一 些 基本 的 知识 技能 ， 详 细 介绍 一 个 页 面 是 如 何 从 构思 到 计划 ， 最 终 成 型 展现 在 互联 
网 上 ， 如 图 16.1 所 示 。 这 是 目前 大 部 分 网 站 所 运用 的 一 种 页 面 布局 。 布 局 中 分 为 头 部 、 底 部 和 中 间 主 
要 部 分 。 其 中 ， 中 间 的 部 分 又 常会 被 拆 分 成 几 列 ， 用 来 放置 不 同 的 页 面 内 容 。 


图 16.1 常见 的 页 面 布局 


本 章 的 主要 知识 点 如 下 。 
构思 页 面 的 布局 。 
制作 页 面 的 顺序 。 

理解 制作 页 面 的 基本 思路 。 


16.1 构思 基础 的 布局 


从 前 面 的 知识 中 已 经 了 解 到 如 何 设计 一 个 页 面 ， 首 先 ， 设 计 师 心中 需要 明确 摆 放 哪些 内 容 ， 接 着 
就 是 构思 如 何 去 布 局 这 样 的 页 面 。 
技巧 : 通常 为 了 便于 工作 ， 可 在 Photoshop 中 设计 出 大 概 的 草图 ， 如 图 16.1 所 示 。 在 这 个 草图 中 ， 设 计 
师 可 以 大 致 将 页 面 的 布局 规划 出 来 ， 如 图 16.2 所 示 。 


第 16 章 你 合 案例 1; 制作 主 沪 癌 二 和 Ge 


16.2 规划 页 面 结构 


可 以 把 页 面 分 割 成 4 部 分 : 页 面 的 项 部 Header、 底 部 Footer、 中 间 部 分 Main， 其 中 Main 又 可 以 
分 成 侧 栏 Side 和 主要 部 分 main。 所 以 ， 在 编写 代码 的 时 候 ， 其 结构 看 上 去 应 该 如 代码 16-1 中 所 示 。 
【代码 16-1】 下 面 给 出 的 是 初始 页 面 的 结构 性 代码 。 


1 <body> 

忆 <div id="container"> < 上 -页 面 层 容器 --> 
3 <div id="header"> < 上 -页 面 头 部 -> 
4 </div> 

5 <div id="Main"> <!- 页 面 主体 -> 
6 <div id="Side"> < 上 - 侧 边栏 -> 

区 </div> 

8 </div> 

9 <div id="Footer"> <!- 页 面 底部 -> 
10 </div> 

11 -</div> 

12 </body> 


【深入 学 习 】 代 码 中 通过 div 定义 了 页 面 的 几 个 组 成 部 分 : 头 部 、 主 题 、 边 栏 和 底部 。 它 们 都 包 
含 在 第 2 行 定义 的 container 层 中 。 

这 里 已 经 设计 好 了 一 层 层 的 框 模型 ， 接 下 来 就 是 针对 于 每 一 块 区 域 ， 设 计 好 针对 于 每 一 对 象 的 样 
式 表 。 


16.2 设计 基础 模块 的 样式 表 


针对 不 同 的 结构 部 分 ， 设 计 好 相对 应 的 CSS 样式 表 ， 如 代码 16-2 所 示 。 
【代码 16-2】 下 面 给 出 的 是 基本 结构 所 对 应 的 样式 表 的 代码 。 
<style type=text/css> 


| 

2 body{ 

3 font:12px 微软 雅 黑 ; // 基 本 信息 

4 margin:0px; 

5 text-align:center; /使 页 面 文本 居中 
6 background:#FFF; 


ss 网 页 设计 主人 


押 } 

8 #container{ 

9 width:100%; 

10 } 

Rl #Header { 

NP ‘Width:800px; 

43 margin:0 auto; 

14 height:100px:; 

5 background:#FFCC99; 
16 Y 

17 #Main { 

18 width:800px; 

19 margin:0 auto; 

20 height:400px; 

2 background:#CCFF00; 
22 } 

23 #side { 

24 float: left; 

25 width: 20em; 

26 background: red; 

27 padding: 15px 0; 

28 } 

29 #Footer { 

30 width:800px; 

31 margin:0 auto; 

32 height:50px; 

33 background:#00FFFF; 
34 } 

35 </style> 


// 页 面 层 容器 
// 页 面 头 部 
// 使 #Header 部 分 自动 页 面 居 中 


// 页 面 主 体 
// 使 #Main 部 分 自动 页 面 居中 


// 侧 栏 


// 设 置 侧 栏 的 空 距 


// 页 面 底部 
// 使 #ooter 部 分 自动 页 面 居 中 


说 明 : 这 里 为 了 令 读 者 能 够 容易 辨识 不 同 的 模块 ， 所 以 每 一 个 CSS 样 式 表 中 都 添加 了 背景 颜色 。 事 实 


上 ， 在 最 终 的 页 面 中 并 不 需要 这 样 做 。 


【深入 学 习 】 上 述 代 码 定义 的 是 前 面 设计 好 的 页 面 , 其 中 第 3 一 6 行 是 整个 页 面 的 样式 , 包括 字体 、 
背景 色 等。 代码 第 23 一 28 行 是 侧 栏 的 样式 ， 包 括 它 的 宽度 、 背 景色 等 。 
【运行 程序 】 以 上 代码 在 浏览 器 中 运行 的 效果 如 图 16.3 所 示 。 
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图 16.3 页 面 布局 的 结构 效果 


这 样 ， 一 个 基础 的 框架 就 完成 了 ， 接 下 来 ， 就 需要 进行 细 化 工作 ， 去 逐一 完成 每 一 个 框 模型 的 对 象 。 


他 
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16.3 完善 网 站 的 子 模块 


接 下 来 所 要 进行 的 工作 ， 就 是 基于 已 经 创建 好 的 页 面 结构 ， 一 点 点 地 去 细 化 完成 网 站 的 各 个 部 分 ， 
如 头 部 、 底 部 、 侧 栏 和 页 面 的 主体 部 分 。 只 要 按部就班 ， 这 些 都 不 会 很 难 。 


16.3.1 网 站 的 导航 栏 


在 这 个 例子 中 ， 和 希望 网 站 的 导航 栏 最 后 出 现 这 样 的 效果 ， 如 图 16.4 所 示 。 


图 16.4 导航 栏 的 效果 


大 部 分 导航 栏 都 是 使 用 列表 项 通过 行内 模块 展现 出 来 ， 导 航 栏 是 常用 的 页 面 元 素 之 一 ， 图 16.4 中 
的 导航 栏 就 是 比较 典型 的 一 种 。 代 码 16-3 中 为 导航 栏 的 制作 方法 。 
【代码 16-3】 制 作 导 航 栏 ， 其 源码 展示 如 下 : 


1 <divid="tabs"> 

2 <ul> <- 制 作 导航 栏 --> 

3 <li><a href="#" title=" 菜 单 1"><span> 菜 单 1</span></a></li> 

4 <li><a href="#" title=" 菜 单 2"><span> 菜 单 2</span></a></li> 

5 <li><a href="#" title=" 菜 单 3"><span> 菜 单 3</span></a></li> 

6 <li><a href="#" title=" 菜 单 4"><span> 菜 单 4</span></a></li> 

7 <li><a href="#" title=" 菜 单 5"><span> 花 样 年 华 </span></a></li> 
8 <li><a href="#" title=" 菜 单 6"><span> 博 客 </span></a></li> 

9 <li><a href="#" title=" 菜 单 7"><span> 联 系 我 们 </span></a></li> 
0 </lul> 

1 </div> 


注意 : 代码 中 第 3~9 行 通过 <li> 罗 列 出 了 菜单 项 ， 当 用 户 单 击 每 个 菜单 项 时 ， 通 过 href 属 性 指定 的 位 置 
可 以 导航 到 目的 地 。 


这 个 导航 栏 的 CSS 样式 表 写法 如 代码 16-4 所 示 。 
【代码 16-4】 制 作 导 航 栏 的 样式 表 ， 其 源码 展示 如 下 : 


#abs { position:relative; /l#tabs 层 的 样式 定义 
float:right; 
width:100%; 
font-size:93%; 
border-bottom:1px solid #F45551; // 设 置 边 框 的 样式 
line-height:normal; 
由 
#tabs ul { 
margin:0; 
10 padding:10px 10px 0 50px: // 设 置 空 距 样式 来 修饰 导航 栏 
11 list-style:none; // 取 消 项 目 列表 符合 
4 } 


中 omDmAwmwN 一 
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13 #tabs li { display:inline; /使 列表 项 横向 排列 
14 margin:0; 

25 padding:0; 

16 下 

17 #tabs a{ floatleft; 

18 background:url(tableft9.gif) no-repeat left top;”// 给 条 目 添加 背景 图 像 
19 margin:0; 

20 padding:0 0 0 4px: 

21 text-decoration:none; /取消 列表 项 链接 下 划 线 
22 } 

23 #tabs a span {float:left; 

24 display:block; 

25 background:url("tabright9.gif") no-repeat right top: 

26 padding:5px 15px 4px 6px; /使 用 空 距 修饰 链接 效果 
27 Color:-#FFF; 

28 } 

29 

30 #tabs a:hover span { 

31 Color:#FFF; 

32 } 

33 #tabs a:hover { 

34 background-position:0% -42px; 

35 } 

36 #tabs a:hover span { 

ST background-position:100% -42px; 

38 b 


注意 : 第 1 ~7 行 定义 了 tabs 层 的 样式 ,涉及 字体 、 宽 度 等 。 第 13 ~ 16 行 的 样式 定义 特别 关键 ， 其 中 第 13 
行 表示 将 列表 项 横向 排列 。 


16.3.2 页面 的 侧 栏 


页 面 的 侧 栏 是 一 个 浮动 屋 ， 它 的 中 间 可 以 放 入 任何 页 面 对 象 。 通 常 ， 一 些 简 单 的 条 目 适合 放 在 这 
里 作为 目录 。 页 面 的 主体 部 分 放 入 一 些 具 体 对 象 的 文本 描述 ， 最 好 再 添加 一 些 图 像 ， 令 这 个 页 面 变 得 
更 加 生动 。 这 个 例子 的 最 终 效果 如 图 16.5 所 示 。 


二 剧情 介绍 ; 阿 兢 1927 年 因 尘 亲 徘 被 关 天 天 纤 刑 ， 效 次 如 你 趣 
标题 1 未 寺 成 功 。 年 径 的 殷 行李 加 被 判 决 这 闻 自 己 的 才子 罪名 成 

秆 送 往 美的 月 昌吉 点 于 从 身 信 要， 他 人 外表 看 似 全 
4 从 


文 丰 内 容 


a 中 克 生 下 当 
标题 2 A 为 自己 塔 了 不 少 好 处 ， 面 对 这 样 的 环境 ， 
他 没有 自 间伐， 他 办 六 天 书 幸 ,为 四 儿 导 放 关 示 的 理 
文员 内 容 乐 ， 还 利用 自 忆 89 知识 超 芭 大 家 条 和 点 自己 的 财务 。 并 思 长 入 
肖申克 的 先 苦 a 己 清 尘 至 栈 状 仿 帐 。 在 监 
标题 3 y 开关 好 生活 的 这 
WRAL 人 要 用 自己 的 实 床 行动 玉 立 观 对 自己 的 和 了 1 


ti 剧情 介绍 : 1945 年 下 天 , 美国 下 部 等 放 党 科 蔷 忆 东 族 首 所 
笃信” 扒 托 震 科 条 局 为 小 女儿 闽 妮 举行 了 年 大 的 靖 礼 

教父” 有 三 个 儿子 : 好 色 的 长 子 吉 尼 , 全 弹 的 次 子 因 震 德 

和 于 从 二 各 总 声 加 认 89 兴 儿子 加 。 其 中 进 尼 二 “ 才 父 ”的 

“而 迈克 吕 因 情史 阴干， 却 对 家 旗 的 “ 李 业 ” 讼 什 


教父" 县 哑 手 党 首 沁 ， 全 干 志 法 的 构 涯 ， 但 后 时 
te 且说 人 下 RE 入 诛 得 人 们 要 鼓 。 他 下 有 一 个 


到 多 


作 要 活 油 
司 习 雪 ， 王 亲 读 间 。 A Er 


图 16.5 页 面 的 主体 
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那么 ， 这 里 需要 更 细 化 地 去 解决 页 面 的 结构 性 问题 。 左 侧 浮动 层 的 制作 并 不 难 ， 只 要 解决 好 文本 
的 排列 就 可 以 了 。 而 右 侧 主体 部 分 , 用 了 表格 来 划分 图 像 和 文本 的 内 容 。 具体 的 写法 如 代码 16-5 所 示 。 
【代码 16-5】 页 面 中 间 部 分 的 细 化 结构 ， 其 源码 展示 如 下 : 


1 <div id="Main"> 

2 <div id="Side"> <!- 页 面 侧 栏 ， 在 页 面 的 左 侧 --> 

3 <div class="sidetext"> 

4 <h2> 标 题 1</h2> 

5 <p> 文 本 内 容 

6 <h2> 标 题 2</h2> 

区 <p> 文 本 内 容 

8 <h2> 标 题 3</h2> 

9 <p> 文 本 内 容 

10 </div> 

11 </div> 

12 <div> <!-- 页 面 主 要 内 容 ， 右 侧 主体 部 分 --> 
13 <table> 

14 <tr> 

15: <td id="film"><img src=" 图 片 /1.jpg" ><p> 肖 申 克 的 救赎 

16 <td> 剧 情 介绍 : <span id="film"> 阿 瑞 1927 年 因 谋杀 罪 被 判 无 期 徙 刑 … 
习 </tr> 

18 <tr> 

19 <td id="film"><img src=" 图 片 /2.jpg"><p> 教 父 1 

20 <td> 剧 情 介绍 : <span id="film"> 1945 年 夏天 ，..… 

21 </tr> 

22 <tr> 

3 <td id="film"><img src=" 图 片 /3jpg"><p> 教 父 2 

24 <td> 剧 情 介绍 : <span id="film"> 在 西西 里 ， 少 年 时 代 的 维 托 为 报 父 仇 ，.… 
25 </tr> 

26 <tr> 

27 <td id="film"><img src=" 图 片 /4.jpg"><p> 教 父 2 

28 <td> 剧 情 介绍 : <span id="film"> 在 警 长 戈 登 和 地 区 检察 官 输 维 * 丹 特 的 协助 
29 Wh 

30 </table> 

31 </div> 

2 </div> 


【深入 学 习 】 第 13 一 30 行 代码 定义 了 一 个 table 表格 ，<tr> 是 表格 的 行 ，<td> 是 表格 的 列 。 

当 基 本 的 结构 完成 之 后 ， 需 要 设计 对 应 于 这 个 结构 的 样式 表 ， 这 需要 经 过 不 断 反 复 地 查看 效果 ， 
才能 达到 美观 。 代 码 16-6 中 为 修饰 页 面 的 样式 表 。 

【代码 16-6】 修 饰 页 面 主体 的 样式 表 ， 其 源码 展示 如 下 : 


.Sidetext {padding:10; /设置 侧 栏 中 文本 的 样式 
color:black; 


虽 

区 

3 和 

4 ”hz2 {font:2em 幼 圆 ; 

5 } 

6 td {color:navy; /设置 表格 中 文本 的 样式 
站 padding:15px; 

8 height:200px; 


SS Ra nit te 


9 border:1px solid white; 

10 } 

11  ##ilm {font:.8em; /设置 flm 层 文本 样式 
12 colorblack; 

13 


【深入 学 习 】 上 述 代码 都 是 定义 的 样式 ， 其 中 第 6 一 10 行 是 对 前 面 表格 中 的 文本 设置 样式 ， 涉 及 
文本 与 表格 边线 之 间 的 距离 和 边线 的 颜色 等 。 
最 后 一 部 分 是 页 面 的 底部 。 页 面 的 底部 也 是 一 个 单独 的 层 ， 它 的 代码 十 分 简单 ， 如 下 所 示 : 


<hr width="700"> 
<div id="Footer"><p>&copy; 2013-14-23 
</div> 


说 明 : <hr> 表 示 “ 水 平 线 ”。 


16.4 最 终 页 面 


将 所 有 的 代码 放 在 一 个 文档 中 ， 可 以 看 到 页 面 的 最 终 效果 ， 如 图 16.6 所 示 。 


区 le FANGHTML+CSS+h 月” 0 局 FA 再 HTMLtCSStJavas- 
Er 


16.6 页 面 的 最 终 效 果 
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16.5 小 结 


本 章 主 要 介绍 了 一 个 页 面 从 构思 到 成 型 的 过 程 。 相 同 页 面 不 同 代码 的 例子 有 很 多 ， 这 里 给 出 了 最 
易于 理解 的 一 种 基础 的 做 法 。 即 便 今 后 遇 到 更 复杂 的 页 面 ， 其 原理 都 是 一 样 的 ， 都 是 建立 于 一 种 制作 
思路 上 ， 即 将 页 面 结构 和 表现 分 离开 ， 针 对 不 同 的 页 面 对 象 去 进行 编辑 。 在 第 17 章 中 ， 将 基于 这 样 的 
结构 页 面 ， 实 现 更 多 更 细致 的 页 面 修饰 ， 令 页 面 效果 更 丰富 。 
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鳃 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 17 章 \ 综 合 案例 2: 设计 复杂 页 面 .wmv 


本 章 将 在 第 16 章 内 容 的 基础 上 ， 将 页 面 拆 分 得 更 细致 化 ， 并 且 在 布局 完成 的 页 面 基础 上 ， 熟 悉 如 
何 去 修饰 页 面 、 拓 展 页 面 的 功能 。 学 习 了 本 章 内 容 ， 掌 握 了 这 些 操作 技巧 后 ， 即 可 制作 大 部 分 主流 的 
页 面 。 本 章 的 主要 知识 点 如 下 。 

构思 页 面 的 布局 。 

按照 结构 顺序 制作 页 面 。 

设计 对 应 于 每 个 模块 的 样式 表 。 

理解 制作 页 面 的 整体 思路 。 


17.1 页 面 的 框架 布局 


在 设计 一 个 页 面 时 ， 首 先是 内 容 的 定位 ， 其 次 是 依据 页 面 内 容 排版 进行 页 面 布局 ， 以 配合 需要 放 
入 页 面 中 的 内 容 。 当 设计 好 初级 的 页 面 布局 后 ， 如 果 页 面 内 容 需 要 ， 则 可 以 进一步 细 分 页 面 布局 。 
页 面 布局 完成 之 后 ， 可 以 在 相应 的 位 置 按照 预先 的 设计 放 入 相应 的 页 面 修饰 。 

设计 页 面 的 方式 有 很 多 种 ， 重 要 的 是 要 保证 页 面 源码 的 可 读 性 、 可 扩展 性 和 良好 的 兼容 性 。 基 于 
这 个 思路 ， 本 章 同 样 是 使 用 相同 的 方案 去 制作 更 复杂 的 页 面 。 


17.1.1 定位 页 面 的 内 容 


假如 是 一 个 具备 大 量 信息 的 基本 门户 页 面 ， 需 要 较 多 的 框 模型 的 层 。 那 么 如 何 去 处 理 好 一 层 层 的 
县 加 ， 就 是 比较 重要 的 一 项 工作 了 。 此 处 ， 页 面 的 初级 布局 效果 如 图 17.1 所 示 。 

可 以 看 出 ， 首 先 页 面 的 初级 布局 是 一 个 分 为 4 部 分 的 框架 ， 分 别 是 intro 〈 头 部 ) 、linklist ( 左 侧 
内 容 ) 、supportingText (主体 内 容 ) 和 footer (页 脚 ) 。 其 次 ， 在 大 框架 之 下 ， 也 已 经 拆 分 出 很 多 不 同 
颜色 块 的 框 模型 。 

说 明 : 这 是 为 了 针对 不 同 的 页 面 内 容 ， 它 们 各 自 属于 不 同 的 上 级 框 模型 ， 即 初级 布局 中 的 4 个 杠 
模型 。 
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图 17.1 页 面 的 初级 布局 


17.1.2 页面 初 级 布局 的 代码 


图 17.1 所 示 框 架 的 代码 写法 如 代码 17-1 所 示 。 
【代码 17-1】 页面 初级 布局 的 代码 ， 其 源码 展示 如 下 : 


<body> 
<div id="container"> // 页 面 层 容器 
<div id="intro"> // 页 面 的 头 部 
</div> 
<div id="supportingText"> // 页 面 的 右 侧 栏 
<div id="footer"> 
</div> 
</div> 
<div id="linklist"> // 页 面 的 左 侧 栏 
10 </div> 


OPPOOoOD= 


说 明 : footer 框 模型 部 分 嵌 套 在 supportingText 框 模型 中 ， 这 样 的 设计 不 是 为 了 不 让 页 面 页 脚 撑 满 页 面 
的 整个 宽度 ， 而 是 为 了 令 它 只 是 存在 于 页 面 主体 的 右 侧 。 如 果 设计 者 不 希望 这 么 做 ， 完 全 可 以 
把 它 独立 出 来 。 


【深入 学 习 】 代 码 第 2 一 11 行 通过 <div> 将 页 面 分 成 了 几 部 分 ， 包括 头 部 、 左 侧 栏 和 右 侧 栏 。 这 3 
部 分 都 放 在 一 个 名 为 container 的 <div> 层 中 。 
基于 页 面 的 结构 性 的 代码 ， 紧 接着 需要 做 的 是 如 何 通过 CSS 样式 表 精 确 控制 整个 页 面 的 布局 ， 如 
代码 17-2 所 示 为 页 面 初级 布局 所 运用 的 样式 表 。 
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【代码 17-2】 页 面 初级 布局 所 运用 的 样式 表 ， 其 源码 展示 如 下 : 


body { font : 12px/17px 微软 雅 黑 ; 
color : #000; 


// 设 定 页 面 的 基本 样式 


background : #dae8bd url(bg_lines.gif) no-repeat top 0%; 


中 

2 

3 

4 margin : auto auto; 
3 padding : 0; 

6 text-align : center; 
7 
8 


} 
#container { width : 762px; 


9 padding : 0; 

10 margin : auto; 

11 text-align : left; 

12 } 

13  ##intro { vertical-align : bottom; 

14 } 

15 #supportingText {padding :0; 

16 margin : -3px 0 40px 0; 
17 background : #d6e6b6; 
18 border : 1px solid white; 
19 width : 469px; 

20 float : right; 

21 } 

22 #0o0ter { background : #a2c1b9; 

23 border-top : 1px solid white; 

24 padding : 0 0 2px 24px; 

25 } 

26 #linklist { margin-top : 50px; 

27 clear : both; 

28 padding : 20px 10px 10px 10px; 
29 display : block; 

30 } 


【深入 学 习 】 在 这 段 样式 表 中 ， 可 以 看 出 它们 对 每 一 块 的 布局 是 如 何 定义 的 ，body 定义 了 整个 页 
面 的 初始 背景 、 文 本 基本 信息 。container 则 是 定义 了 整个 页 面 的 主体 部 分 ， 参 照 图 17.1 可 以 容易 地 分 


// 设 置 #container 层 的 宽度 


// 设 置 #supportingText 层 的 位 置 


// 设 置 边 框 的 样式 


// 设 置 林 ooter 层 的 背景 
// 设 置 空 距 的 样式 


// 设 置 梓 inklist 层 的 位 置 


辨 出 intro、supportingText、footer 和 linklist 所 定义 的 不 同位 置 框架 。 


17.2” 细 化 页 面 的 局 部 


当 页 面 的 整体 构架 完成 之 后 ， 接 下 来 就 是 对 于 局 部 的 修饰 和 细 化 ， 在 图 17.1 中 已 经 可 以 看 出 在 每 


一 个 初级 框架 下 将 要 填 入 的 内 容 ， 本 节 将 一 一 揭 开 这 些 模块 神秘 的 面纱 。 


17.2.1 intro 部 分 


页 面 的 头 部 在 这 里 定义 为 intro， 依 照 案例 的 需要 ， 将 主要 使 用 图 像 来 填充 这 一 部 分 。 当 然 ， 需 要 


和 
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设计 更 详细 的 样式 表 来 描述 intro 部 分 ， 如 代码 17-3 所 示 为 完善 页 面 intro 部 分 的 代码 。 
【代码 17-3】 完 善 intro 部 分 的 代码 ， 其 源码 展示 如 下 : 


| <div id="intro"> 

2 <div id="pageHeader > 

3 <h1><span> 更 改 样式 表 可 以 在 这 个 位 置 蔡 换 页 面 的 Banner 

4 </span></h1></div> 

5 <div id="quickSummary"> 

6 <p class="p1"><span> 使 用 这 个 样式 表 可 以 任意 更 改 页 面 右上 角 的 图 像 </span></p> 

区 <p class="p2"><span> 设 计 复 杂 页 面 <a href=" >html</a> &<a 

8 href=">css</a></span></p> 

9 </div> 

10 2 

11 </div> 

【深入 学 习 】 上 述 代码 在 页 面 的 头 部 添加 了 两 个 div， 第 7 一 8 行 中 虽然 添加 了 两 个 链接 ， 但 都 没 

有 设置 导航 目的 地 。 


说 明 : 如 果 没有 相应 的 样式 表 做 出 定位 ， 通 过 上 述 结构 性 标签 是 无 法 窥探 出 页 面 的 形态 的 。 


为 上 述 代 码 添加 所 对 应 的 样式 表 ， 如 代码 17-4 所 示 为 intro 部 分 的 CSS 样式 表 。 
【代码 17-4】intro 部 分 的 CSS 样式 表 ， 其 源码 展示 如 下 : 


#pageHeader { padding : 0; 
margin : 0; 
height : 246px; 
border : 1px solid white; 


// 设 置 #pageHeader 层 在 页 面 中 的 样式 


/国定 层 的 高 度 大 小 
// 设 置 边 框 的 样式 


} 
#pageHeader h1 { background : url(title_hdr.jpg) no-repeat top left; /设置 背景 图 像 


width : 760px; 
height : 176px; 
margin : 70px 0 0 0; 
padding : 0; 
} 

#pageHeader h1 span { display : none; 

} 

#pageHeader h2 { padding : 0; 

margin : 0; 


b 
#pageHeader h2 span { display : none; 
1 
#quickSummary p.p1 { width : 320px; 
height : 92px; 
position : absolute; 
top : 1px; 


margin-left : 470px; 


padding : 0; 
font-size : 11px; 
color : #fff; 


// 设 置 不 同 边 距 大 小 


// 隐 藏 页 面 对 象 


// 隐 藏 页 面 对 象 


// 定 位 其 在 页 面 的 位 置 属性 


/设置 空 距 为 0 


/设置 文本 颜色 
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27 font-family : 微软 雅 黑 ; 

28 background : url(bg_redbox.png) no-repeat;  // 设 置 背 景 图 像 
29 

30 #quickSummary p.p1 span { display : none; 

31 

32 #quickSummary p.p2{ display : block; /隐藏 页 面 对 象 
33 position : absolute; /绝对 定位 

34 top : 53px; 

35 padding :00 0 7px; 

36 font-size : 11px; 

7 text-align : right; 

38 color : #490909; 

39 font-family : 微软 雅 黑 ; 

40 Clear : both; 

41 


【深入 学 习 】 通 过 这 样 的 样式 表 ， 就 便于 理解 代码 17-3 了 。 代 码 17-3 中 第 2 一 4 行 是 pageHead 
部 分 ， 在 这 段 代 码 中 ， 表 明 使 用 了 背景 图 像 来 放置 在 页 面 头 部 的 位 置 ， 这 可 以 通过 代码 17-4 的 第 6 一 
11 行 看 出 来 。 之 后 为 了 令 页 面 更 美观 ， 在 页 面 的 右上 角 放 入 一 张 修饰 的 图 像 bg_redbox.png， 如 代码 
17-4 中 第 19 一 29 行 所 示 。 需 要 注意 的 是 ，pageHeader hl span 样式 表 对 象 是 被 隐藏 的 ， 虽 然 这 样 看 上 
去 似乎 没有 什么 用 ， 但 有 时 这 样 做 便于 配合 JavaScript 使 用 。 

说 明 : quickSummary p.p2 对 象 定义 了 一 个 小 小 的 标题 栏 在 页 面 的 左上 角 ， 这 样 做 的 目的 是 为 了 增加 页 
面 的 美观 度 。 所 以 从 全 局 来 说 ，intro 部 分 可 以 看 成 是 由 页 面 左 上 角 的 标题 和 右上 角 的 图 像 以 及 
页 面 的 中 间 头 部 图 像 3 部 分 组 成 。 


【运行 程序 】 浏 览 该 页 面 ， 效 果 如 图 17.2 所 示 。 


Beautiful designs 


coming to life 


设计 复 科 面 html acss 
二 :t's what we do 


图 17.2 页 面 的 头 部 


17.2.2 页面 的 左 侧 部 分 


当 设 计 好 页 面 的 头 部 后 ， 接 下 来 先 处 理 页 面 的 左 侧 。 从 图 17.1 中 可 以 看 出 ， 页 面 的 整个 左 侧 栏 都 
放 在 linklist 对 象 中 。 下 面 来 看 一 下 左边 侧 栏 的 结构 性 代码 ， 如 代码 17-5 所 示 。 

【代码 17-5】 页面 左 侧 部 分 的 结构 性 代码 ， 其 源码 展示 如 下 : 

1 <divid="linklist"> 


. <div id="preamble"> 
3 <h3><span> 设 计 法 则 </span></h3> 


@ 
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4 <p class="p1"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 保 持 简 
5 ”单纯 朴 : 

6 </span></p> 

7 <p class="p2"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

8 。 呼吸 空间 : 

9 </span></p> 

10 <p class="p3"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

11 ”大 就 是 美 : 

忆 </span></p> 

13 </div> 

14 <divid="linklist2"> 

15 <div id="lselect"> 

16 <h3 class="select"><span>Select a Design:</span></h3> 

17 <ul> 

18 <li><a href=" tile="AccessKey: a" accesskey="a"> 目 录 1</a> 一 
19 一 <ahref=" >name one</a></li> 

20 <li><a href=" tile="AccessKey: b" accesskey="b"> 目 录 2</a> 一 
21 一 <ahref=" >name two</a></li> 

22 <li><a href=" title="AccessKey: c" accesskey="c"> 目 录 3</a> 一 
23 一 <a href=">name three</a></l> 

24 <li><a href=" title="AccessKey: d" accesskey="d"> 目 录 4</a> 一 
25 ”一 <a href=">name four</a></li> 

26 <li><a href=" title="AccessKey: e" accesskey="e"> 目 录 5</a> 一 
27 ”一 <a href=">name five</a></li> 

28 <li><a href=" title="AccessKey: f" accesskey="f"> 目 录 6</a> 一 
29 一 <ahref=">name six</a></li> 

30 </ul> 

31 </div> 

32 <div id="larchives"> 

33 <h3 class="archives"><span>Archives:</span></h3> 

34 <Ul> 

35 <li><a href= > 下 一 页 &raquo;</a></li> 

36 <li><a href=" > 内 容 简 介 </a></li> 

37 </ul> 

38 </div> 

39 </div> 


【深入 学 习 从 这 段 代码 看 出 ,linklist 框 模型 中 包含 两 部 分 ,分 别 是 preamble 和 linklist2 .而 linklist2 
部 分 下 是 两 个 项 目 列表 部 分 ， 分 别 是 lselect 和 larchives。 所 以 在 图 17.1 中 ， 页 面 左 侧 由 3 个 颜色 块 组 
成 ， 这 3 个 颜色 块 就 是 preamble、lselect 和 larchives。 其 样式 表 代 码 如 代码 17-6 所 示 。 

【代码 17-6】 页 面 左 侧 布局 的 CSS 样式 表 ， 其 源码 展示 如 下 : 


1  #inklist {margin-top : Opx; /设置 剂 inklist 在 页 面 中 的 样式 
这 padding:0px'; 

3 height:800px; 

和 直 

5 ， 圾 nkList 划 inkList2 ul { padding : 20px 10px 10px 10px; /设置 空 距 的 样式 

6 display : block; /设置 为 块 级 对 象 
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国 } 
8  #inklistli{ margin : 2px 0; 
9 } 
10 #preamble { padding :0; 
RR margin : -3px 0 0 0; 
FF width : 288px:; 
3 float : left: 
14 } 
15 #preamble h3 { width : 288px; 
16 height : 47px; 
17 margin : 0; 
18 padding : 0; 
19 border-top : 1px solid white; 
20 } 
21 #preamble h3 span {display : none; 
22 } 
23 ”#preamble p { font : 12px/15px 微软 雅 黑 ; 
24 padding : 0 0 0 3px; 
25 width : 288px; 
26 } 
27 #preamble p.p1 {margin-top : 10px; 
28 } 
29 #lselect, #larchives { width : 256px; 
30 clear : left; 
31 padding : 0; 
32 margin : 0; 
33 T 
34 #select {border-bottom : 1px solid #fff; 
95 margin-top : 20px; 
36 } 
37 #larchives { border-bottom : 1px solid #fff; 
38 margin-top : 20px; 
39 } 
40 #lselect h3 span, #larchives h3 span { display : 
41 } 
42 ”pf{font : 12px/17px 微软 雅 黑 ; 
43 margin : 0 0 17px 0; 
BE 上 
45 a:link {font-weight : bold; 
46 text-decoration : none; 


color : #027d87; 
. 
a:visited { font-weight : bold; 
text-decoration : none; 
color : #858686; 
} 


a.c:visited { font-weight : normal; 
text-decoration : none; 
color : #858686; 


/设置 元 reamble 在 页 面 中 的 样式 


// 隐 藏 对 象 


/设置 州 select 在 页 面 中 的 样式 


none; 
// 设 置 段 落 文 本 的 样式 
// 设 置 链接 状态 的 样式 
// 取 消 链 接 下 划 线 

// 设 置 链接 文本 的 颜色 
// 设 置 访问 链接 的 样式 
// 取 消 链 接 下 划 线 


// 设 置 访问 链接 的 样式 
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56 和 

57 a:hover, a:active { text-decoration : underline; /设置 鼠标 指针 滑 过 链接 的 状态 样式 
58 color : #000505; 

59 } 


60 ulf{list-style-type : none; 
61 margin : 0; 

62 padding : 0; 

63 Ph 


【深入 学 习 】 上 述 代码 中 ， 第 1 一 4 行 的 linklist 样式 表 定义 了 左 侧 框 模型 的 大 小 、 位 置 属性 。 
第 10 一 28 行 代码 以 preamble 开头 的 一 系列 样式 表 的 对 象 是 图 17.1 中 左 侧 的 第 1 个 颜色 块 (绿色 )， 
而 第 34 一 41 行 代 码 的 样式 表 对 应 的 是 图 17.1 中 的 第 2 个 和 第 3 个 颜色 块 ( 深 蓝 和 浅 蓝 ) 。 第 42 一 63 
行 是 对 页 面 基 本 属性 的 修改 ， 如 文本 的 颜色 、 链 接 的 状态 和 项 目 列表 的 属性 。 

【运行 程序 】 最 终 的 显示 效果 如 图 17.3 所 示 。 


后 本 EEC 


Er 


多 8536 ~ 


图 17.3 页 面 的 左 侧 栏 
17.2.3 页面 的 右 侧 栏 主体 部 分 和 页 脚 


这 个 复杂 工程 的 最 后 一 项 就 是 完成 页 面 所 剩 下 的 右 侧 主 栏 和 页 脚 ， 事 实 上 这 是 最 容易 的 一 部 分 。 
在 页 面 中 ， 主 体 部 分 通常 用 来 放置 最 重要 的 信息 ， 而 不 需要 过 多 彰显 个 性 。 代 码 主体 部 分 的 写法 如 代 


图 
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码 17-7 所 示 。 

说 明 : 如 果 一 个 页 面 只 做 到 美观 ， 而 缺少 内 容 ， 这 个 页 面 就 失去 了 灵魂 ， 那 么 无 论 这 个 页 面 有 多 漂亮 ， 
也 都 空 有 其 表 。 
【代码 17-7】 页 面 右 侧 主 栏 的 结构 ， 其 源码 展示 如 下 : 


1 <divid="supportingText"> 

这 <div id="explanation"> 

3 <h3><span> 文 本 内 容 一 </span></h3> <!-- 主 体内 容 标题 --> 
4 <p class="p1"><span> 域 名 的 作用 : <!-- 主 体内 容 -> 
5 

6 </span></p> 

区 <p > 后 缀 的 选择 : 

8 

9 </span></p> 

10 </div> 

| <div id="participation"> 

12 <h3><span> 文 本 内 容 二 </span></h3> 

13 <p><STRONG> 什么 是 robots.txt? </STRONG> </p> 

14 <p>robots.txt 是 一 个 纯 文本 文件 ， 

15  … 

16 <p > 当 一 个 搜索 机 器 人 访问 一 个 站 点 时 

二 区 

18 <p >robots txt 必须 放置 在 一 个 站 点 的 根 目录 下 ， 而 且 文件 名 必须 全 部 小 写 。 
19 </div> 

20 <div id="benefits"> 

| <h3><span> 文 本 内 容 三 </span></h3> 

22 <p > 随 着 网 页 制作 经 验 的 积累 ， 

23  … 

24 </div> 

5 <div id="requirements"> 

26 <h3><span> 文 本 内 容 四 </span></h3> 

27 <p> 一 般 来 说 ， 绝 大 多 数 普通 

28  ，… 

29 <p> 波 士 顿 一 位 图 形 设计 者 兼 美术 讲师 说 

30 … 

31 </div> 

32 

33 <div id="footer">End <!-- 页 脚 内 容 --> 
34 </div> 

35 -</div> 


【深入 学 习 】 这 段 代码 非常 容易 理解 ， 它 只 是 将 主 栏 部 分 分 成 一 个 个 的 段落 ， 那 么 对 于 这 样 的 段 
落 ， 设 计 样式 表 时 ， 只 要 注意 将 文本 标题 和 文本 段落 修饰 好 即 可 。 其 样式 表 如 代码 17-8 所 示 。 
【代码 17-8】 页 面 右 侧 主 栏 的 样式 表 ， 其 源码 展示 如 下 : 
1  #supportingText{ padding : 0: /定义 右 侧 第 一 栏 的 样式 
margin : -3px 0 40px 0; 
:| background : #d6e6b6; 
4 border : 1px solid white; 
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width : 469px:; 
float : right; 
} 
#supportingText p { margin : 9px 17px 17px 24px; 


} 
#explanation h3 { background : url(hdr_about.gif) no-repeat; 
width : 469px; 
height : 32px; 
margin : 0; 
padding : 0; 


} 
#explanation h3 span { display : none; 


} 
#participation h3 { background : url(hdr_participation.gif) no-repeat; 
width : 469px; 
height : 32px: 
margin : 0; 
padding : 0; 


} 
#participation h3 span { display : none; 


} 
#benefits h3 { background : url(hdr_benefits.gif) no-repeat; 
width : 469px; 
height : 32px; 
margin : 0; 


} 
#benefits h3 span { display : none; 
} 


#requirements h3 { background : url(hdr_requirements.gif) no-repeat; 
width : 469px; 
height : 32px; 
margin : 0; 
padding : 0; 


} 
#requirements h3 span { display : none; 


} 

#footer { background : #a2c1b9; 
border-top : 1px solid white; 
padding : 0 0 2px 24px; 

D 


1/ 放置 右 侧 第 一 栏 的 标题 图 像 


// 隐 藏 对 象 
// 定 义 右 侧 第 二 栏 的 样式 


// 隐 藏 对 象 
// 定 义 右 侧 第 三 栏 的 样式 


// 隐 藏 对 象 
/定义 页 脚 样式 


【深入 学 习 】supportingText 样式 表 划 分 了 主 栏 在 页 面 中 的 位 置 以 及 一 些 基 本 的 属性 ， 如 背景 颜色 
和 边框 的 样式 。supportingText p 样式 表 则 定义 了 主 栏 文本 的 位 置 属性 ， 即 在 框 模型 中 处 于 一 个 怎样 的 
位 置 。 此 外 可 以 看 到 ，#explanation h3、#participation h3、#benefits h3 和 轨 equirements h3 这 4 个 样式 表 


是 上 


来 定义 4 段 文本 的 标题 , 而 这 个 标题 使 用 的 是 图 像 来 蔡 代 文本 标题 , 文本 则 被 隐藏 。 最 后 一 个 footer 
样式 表 只 是 简单 地 定位 了 页 脚 的 样式 。 至 此 ， 整 个 页 面 就 完成 了 。 


注意 : 第 10 行 通过 URL 来 指定 图 片 地 址 。 
【运行 程序 】 这 个 页 面 最 终 的 显示 效果 如 图 17.4 所 示 。 


3 
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EB 
图 17.4 页 面 的 最 终 效 果 


17.3 小 结 


设计 页 面 并 不 是 很 难 ， 关 键 在 于 能 够 细心 认真 地 处 理 好 每 一 个 细节 ， 对 设计 保持 热情 ， 这 才 是 保 
证 一 个 设计 者 拥有 不 断 创 作 灵 感 的 源泉 。 当 然 ， 要 成 为 一 个 优秀 的 设计 师 没有 什么 捷径 可 走 ， 只 有 通 
过 大 量 的 训练 才能 练 就 良好 的 制作 感觉 ， 才 能 成 为 一 个 出 色 的 前 端 页 面 设 计 师 。 
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久 1 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 制 作 首页 的 头 部 .wmv、 制 作 首 页 的 主体 和 页 脚 部 
分 .Wmv、 二 级 页 面 的 制作 .wmv 

学 习 了 关于 CSS 布局 页 面 的 方法 后 ， 如 果 要 更 好 地 使 用 各 种 属性 ， 进 行 页 面 元 素 的 控制 ， 就 要 不 
断 地 进行 实践 。 这 一 章 主 要 的 内 容 是 讲解 一 个 完整 的 站 点 首页 和 一 个 二 级 页 面 的 制作 ， 目 的 是 通过 实 
例 来 讲解 站 点 制作 的 步骤 和 使 用 的 技巧 。 通 过 本 章 的 学 习 ， 重 点 要 掌握 编写 代码 的 方式 ， 制 作 站 点 的 
流程 、 站 点 结构 和 样式 的 规划 等 知识 。 本 章 的 主要 知识 点 如 下 。 

构思 页 面 的 布局 。 

页 面 的 切 图 。 

制作 页 面 的 顺序 。 

二 级 页 面 的 制作 。 


18.1 分 析 效 果 图 


因为 在 该 实例 中 ， 只 是 讲解 使 用 CSS 进行 整 站 布局 的 方法 ， 所 以 只 讲解 站 点 首页 和 一 个 二 级 页 面 
的 制作 方法 。 其 中 站 点 首页 的 效果 如 图 18.1 所 示 。 


18.1 站 点 首页 的 效果 


二 级 页 面 的 效果 如 图 18.2 所 示 。 
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18.2 ”站 点 二 级 页 面 的 效果 


从 图 18.1 和 图 18.2 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 和 底部 是 相同 的 ， 右 侧 部 分 的 宽度 和 
内 容 是 不 同 的， 中 间 的 内 容 部 分 也 有 很 大 的 区 别 。 下 面 分 别 进行 分 析 。 


1. 首页 的 分 析 


从 图 18.1 可 以 看 出 ， 此 时 首页 纵向 可 以 分 为 3 个 部 分 : 头 部 〈 包 括 logo 部 分 和 导航 ) 、 内 容 部 分 
和 底部 。 其 中 内 容 部 分 又 可 以 分 为 3 个 部 分 : 左 侧 的 服务 (Services) 和 新 闻 (News) 部 分 、 中 间 内 容 
部 分 以 及 右 侧 的 关于 网 站 (About Us) 和 欢迎 图 片 部 分 。 


. 二 级 页 面 的 分 析 
二 级 页 面 和 首页 的 结构 基本 相同 ， 其 区 别 在 于 右 侧 部 分 的 宽度 和 首页 有 差别 。 


18.2 切 图 


分 析 完 页 面 结构 之 后 ， 就 是 切 图 的 制作 。 其 内 容 包 括 文 本 的 隐藏 、 切 片 的 选择 和 保存 格式 等 几 个 
方面 。 下 面 进行 详细 的 讲解 。 
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18.2.1 制作 首页 的 切 图 


在 制作 切 图 时 ， 首 先 要 区 分 出 页 面 的 内 容 和 修饰 部 分 ， 然 后 分 析出 哪些 修饰 部 分 是 可 以 用 CSS 代 
码 实现 ， 哪 些 部 分 可 以 用 重复 背景 实现 ， 最 后 要 切 出 需要 知道 详细 宽度 的 部 分 。 在 制作 切 图 时 ， 最 好 
把 修饰 背景 上 的 文本 内 容 去 掉 ， 同 时 尽量 减少 图 片 文件 的 数量 。 制 作 好 的 首页 切片 如 图 18.3 所 示 。 
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18.3 首页 的 切片 


从 图 18.3 可 以 看 出 ， 切 片 中 作为 背景 使 用 的 大 多 是 圆 角 框 的 部 分 和 含有 渐变 颜色 的 部 分 。 其 中 使 
用 单纯 一 种 颜色 的 部 分 , 可 以 用 CSS 来 实现 。 具体 哪些 修饰 部 分 使 用 背景 图 片 , 哪些 修饰 部 分 使 用 CSS 
制作 ， 将 在 后 面 的 章节 中 详细 介绍 。 


315 


SS 网 页 设计 详解 


注意 : 切 好 图 后 ， 将 切片 保存 到 磁盘 相应 的 位 置 。 需 要 注意 的 问题 是 ， 要 将 内 容 部 分 的 图 片 和 颜色 复 
杂 的 背景 图 保存 成 JPEG 格 式 。 


18.2.2 ”二 级 页 面 的 切 图 


从 首页 和 二 级 页 面 的 结构 可 以 知道 ， 此 时 二 级 页 面 中 需要 重新 切 图 的 地 方 并 不 多 。 切 图 的 主要 目 
的 是 切 出 两 个 内 容 图 片 ， 同 时 确定 内 容 各 个 部 分 的 宽度 。 切 图 后 的 效果 如 图 18.4 所 示 。 
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图 18.4 二 级 页 面 的 切 图 


切 好 图 后 ， 新 建 一 个 站 点 ， 然 后 把 将 页 面 中 使 用 到 的 图 片 放 入 images 文件 夹 里 。 关 于 新 建站 点 的 
方法 ， 在 前 面 的 章节 中 讲解 过 了 ， 这 里 不 再 獒 述 。 
注意 : 图 片 的 命名 可 以 保留 原 有 的 命名 ， 也 可 以 重新 命名 ， 重 新 命名 的 目的 是 使 图 片 的 名 称 更 容易 
理解 。 
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18.3 ”制作 站 点 首页 头 部 


切 完 图 ， 新 建 了 站 点 ， 做 好 准备 工作 后 ， 就 可 以 开始 制作 页 面 了 。 同 前 面 章节 的 实例 制作 一 样 ， 


要 将 整个 页 面 分 成 几 个 部 分 进行 制作 。 下 面 分 别 进行 讲解 。 
18.3.1 首页 头 部 的 信息 和 基础 样式 的 制作 


【代码 18-1】 首 先 制作 页 面 头 部 信息 ， 主 要 包括 页 面 标 题 等 ， 其 代码 如 下 所 示 : 


re 代码 18-1: 首页 头 部 的 信息 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


1 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
全 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3 ”<html xmlns="http://www.w3.org/1999/xhtml"> 

4 <head> 

5 <metaname="robots" content="all" /> 

6 <metaname="author" content=” /> 

7 <metaname="Copyright" content="banquan" /> 

8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
9 <metaname="description" content="" /> 

10 <meta content="" name="keywords" /> 

11 <title>Home</title> 

12 <link href="style/main.css" type="text/css" rel="stylesheet" /> 

13 <link rel="icon" href=" type="image/x-icon" /> 

14 <link rel="shortcut icon" href=" type="image/x-icon" /> 

15 </head> 


/链接 CSS 样式 表 


【深入 学 习 】 在 链接 样式 的 语句 后 面 ， 第 13 一 14 行 增加 了 两 个 link 元 素 ， 其 目的 是 制作 收藏 夹 


图 标 。 


注意 : 第 8 行 设置 charset=utf8， 如 果 网 站 全 部 页 面 都 这 样 设置 ， 可 以 防止 出 现 乱码 页 面 。 


【代码 18-2】 接 下 来 制作 页 面 的 基础 样式 ， 其 代码 如 下 所 示 : 


re 代码 18-2: 首页 基础 样式 的 制作 
源码 路 径 : 光盘 \ 源 文件 \18\stylemain.css 


六 基础 样式 */ 


日 

于 

3 

一 margin: Opx; 

5 padding: Opx:; 

6 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; 
区 color:#58595B; 

8 font-size:11px; 

9 list-style-type: none; 


A* 定 义 页 面 使 用 的 字体 */ 


SS 网 页 设计 评估 


10 text-decoration: none;} 

11 body{ 

这 height: 100%; 

13 background-color:#5c5c5c;} A* 定 义 页 面 背景 色 */ 
14 img{ 

15 border:none;} // 取 消 边 框 

16 af /定义 页 面 链接 的 样式 
他 Color: #ffffff; 

18 text-decoration: none;} 

19 ailink{ 

20 text-decoration:none;} 

21 a:hover{ 

22 text-decoration: underline;} 

23 form{ 

24 margin: Opx; 

25 padding: Opx;} 

26 .clear{ 

2 line-height: 1px; 

28 clear:both; 

29 visibility:hidden;} 


【深入 学 习 】 第 3 一 10 行 的 基础 样式 中 定义 了 字体 、 页 面 的 背景 颜色 和 相关 各 个 页 面 元 素 的 初始 
样式 ， 同 时 取消 了 可 能 存在 兼容 问题 的 元 素 的 补 白 和 边界 。 其 他 都 是 普通 样式 的 定义 ， 非 常 简 单 ， 这 
里 不 再 详 述 。 

说 明 : 第 15 行 的 border:none， 表 示 没 有 控件 ， 没 有 边框 。 


18.3.2 ”首页 头 部 的 分 析 


首页 头 部 信息 和 基础 样式 制作 完成 后 ， 就 开始 详细 制作 首页 的 头 部 。 首 先 还 是 对 首页 头 部 的 效果 
图 进行 分 析 ， 其 目的 是 区 分 页 面 中 内 容 和 修饰 的 部 分 。 首 页 头 部 的 效果 如 图 18.5 所 示 。 
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18.5 页 面 头 部 的 效果 


从 图 18.5 可 以 看 出 ， 头 部 主要 分 为 两 个 部 分 ， 其 中 导航 菜单 以 上 的 部 分 ， 可 以 用 背景 图 片 的 方式 
实现 。 导 航 菜单 部 分 ， 左 侧 可 以 用 一 个 圆 角 图 片 背景 实现 ， 其 余部 分 可 以 用 一 个 重复 的 渐变 背景 图 片 
实现 。 每 个 导航 内 容 之 间 的 白色 分 隔 线 ， 可 以 用 背景 图 片 来 实现 ， 也 可 以 采用 页 面 添加 代码 实现 。 


18.3.3 首页 头 部 结构 的 制作 


在 制作 首页 头 部 之 前 ， 先 分 析 一 下 页 面 所 要 显示 的 效果 。 此 时 页 面 定 义 了 背景 色 为 国 c5c5c〈 一 
种 灰色 ) ， 而 从 效果 图 可 以 看 出 ， 页 面 的 主体 部 分 的 背景 是 白色 ， 所 以 首先 要 增加 一 个 用 于 显示 背景 


全 


颜色 的 父 元 素 。 
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【代码 18-3】 下 面 将 头 部 分 成 header 和 menu 两 个 部 分 并 分 别 制作 ， 其 代码 如 下 所 示 : 


区 | 代码 18-3: 头 部 分 成 header 和 menu 两 个 部 分 并 分 别 制作 


源码 路 径 : 光盘 \ 源 文件 \18\index.html 


1 <divid="main"> <!- 显 示 白色 背景 的 元 素 --> 
2 ”<!-header 部 分 -> 

=] <div id="header"> <!- 头 部 logo 和 banner 所 在 的 部 分 --> 
4 <div class="link"> 

5 <a href="#">SiteMap </a>| <a href="#">Contact Us </a></div></div> 

6 <divid="menu"> <!- 导 航 列表 开始 --> 
区 <div class="menulist"> 

8 <div class="menucontent"> 

9 <ul id="nav"> 

10 <li><ahref="#">HOME </a></li> 

11 <li>|</li> <!- 分 隔 线 的 部 分 --> 
12 <li><a href="#">ABOUT &amp; US</a></l> 

13 <li>|</li> 

14 <li><a href="#">SERVICES </a> 

15 <li>|<Ili> 

16 <li><a href="#">NEWSROOM </a></l> 

17 <li>|</li> 

18 <li><a href="#">SUPPORT </a></li> 

19 <li>j<Ili> 

20 <li><a href="#">OTHER PLACE </a></li></ul> </div> 

ll </div><div class="menuleft"></div> 

22 <div class="clear"></div></div></div> 


【深入 学 习 】 第 3 一 5 行 定义 了 header 部 分 ， 这 里 只 定义 了 两 个 链接 。 第 6 一 22 行 定义 了 menu 部 
分 ， 其 中 包含 一 个 列表 ， 列 表 项 都 是 一 些 导 航 链接 。 


说 明 : 其 中 menulist 元 素 用 来 显示 导航 列表 的 背景 。menuleft 元 素 用 来 制作 导航 列表 左 侧 圆 角 。 用 来 分 
隔 各 个 导航 内 容 的 “|”， 其 实 是 一 个 修饰 部 分 。 按 照 CSS 布 局 的 本 质 来 看 ， 应 该 制作 成 背景 图 
片 ， 读 者 可 以 尝试 使 用 背景 图 片 来 实现 。 


18.3.4 首页 头 部 CSS 代码 的 编写 


制作 完 页 面 结构 之 后 ， 就 可 以 编写 CSS 部 分 了 。 在 编写 CSS 部 分 时 ， 如 果 发 现 结构 部 分 存在 不 合 


理 的 地 方 ， 要 及 时 修改 。 
1. main 部 分 的 样式 
main 部 分 的 样式 主要 
和 


Width:820px; 
margin:0 auto; 


来 制作 页 面 白 色 的 背景 和 除 顶 部 以 外 的 白色 边界 ， 其 具体 代码 如 下 所 示 : 


background-color:##fffff;} 


_ 轩 


2. header 部 分 的 样式 


header 部 分 的 样式 主要 用 来 显示 头 部 的 背景 图 片 ， 同 时 还 要 控制 元 素 的 居中 显示 ， 所 以 要 定义 元 
素 的 margin 属性 和 合适 的 高 度 、 宽度 。 同时 由 于 在 header 部 分 中 存在 着 两 个 导航 文本 , 所 以 要 控制 link 
元 素 的 位 置 ， 使 导航 的 文本 显示 在 正确 的 位 置 上 。 其 具体 代码 如 下 所 示 : 


#header{ 
‘width:790px; 
height:155px; 
margin:0 auto; 广 定义 居中 */ 
background:url(../images/top.jpg) no-repeat right top;} 上 添加 背景 */ 
Jinkf 
float:right'; 
margin:5px 5px 0 0; A/* 精确 控制 链接 文本 的 位 置 */ 
Color:-##fffff:} 


定义 完 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.6 所 示 。 


COMPANY 


图 18.6 定义 了 头 部 样式 后 的 显示 效果 


从 图 18.6 可 以 看 出 ， 此 时 头 部 已 经 显示 正常 了 ， 但 是 下 面 导航 列表 的 文本 却 没 有 了 。 这 是 由 于 在 
基础 样式 中 ， 定 义 链接 的 颜色 为 白色 ， 同 时 页 面 的 背景 颜色 也 是 白色 造成 的 。 


3. menu 部 分 的 样式 


menu 部 分 包括 两 个 部 分 ， 一 个 是 左 侧 的 圆 角 框 部 分 ， 另 一 个 是 导航 列表 部 分 。 
【代码 18-4】menu 部 分 的 样式 的 具体 代码 如 下 所 示 : 


re 代码 18-4: menu 部 分 的 样式 
源码 路 径 : 光盘 \ 源 文件 \18\style\main.css 


#menu{ 
width:790px; 
margin:0 auto; 六 居中 显示 */ 
padding:10px 0 5px 0;} 
.menulist{ 
Width:620px; 
float:right; Hz 使 导航 列表 处 于 menu 元 素 的 右 侧 */ 
height:28px; 
background:url(../images/index_20.gif) repeat-x:} 上 添加 列表 背景 */ 
.menuleft{ 
float:right; 
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2 width:13px; 

13 height:28px; 

14 background:url(../images/index_19.gif) no-repeat;} 六 添加 圆 角 */ 

15 .menucontent ul Ii{ 六 定义 分 隔 线 颜色 和 列表 同行 显示 */ 
16 Color-#fFffff; 

17 font-weight:bold; 

18 float:left; 

19 margin:5px 0 0 10px;} 

20 .menucontent ullia{ 


21 font-weight:bold; 六 文本 的 加 粗 */ 

22 Color-##ffffff: 

23 margin-bottom:7px; 六 导航 内 容 链接 的 精确 定位 */ 
24 font-size:13px;} 

25 #nav{ 

26 margin-left:20px; * ul 的 精确 定位 */ 

ZX line-height: 16px; 

28 list-style-type: none; 

29 font-size: 14px;} 


【深入 学 习 】 上 述 代码 中 ， 首 先 要 定义 的 就 是 menu 元 素 的 宽度 和 居中 。 接 着 要 使 导航 列表 处 于 
menu 元 素 的 右 侧 ， 所 以 还 要 使 用 浮动 属性 ， 控 制导 航 元 素 的 位 置 。 
说 明 : 为 了 精确 定位 列表 的 位 置 ， 还 要 使 用 相应 的 补 白 和 边界 属性 ， 同 时 还 要 定义 导航 列表 的 链接 样 
式 ， 使 导航 文本 能 够 正常 显示 。 


【运行 效果 】 定 义 了 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.7 所 示 。 
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图 18.7 定义 完 导航 部 分 样式 后 的 显示 效果 
这 样 首页 的 头 部 就 制作 完成 了 ， 接 下 来 制作 首页 的 主体 部 分 。 


18.4 制作 首页 的 主体 部 分 


首页 的 主体 部 分 可 以 分 为 3 个 部 分 ， 分 别 是 左 侧 的 服务 和 新 闻 部 分 ， 中 间 的 内 容 部 分 ， 右 侧 的 关 
于 网 站 和 欢迎 图 片 部 分 。 下 面 分 别 讲解 其 制作 过 程 。 
18.4.1 ”分析 主体 部 分 效果 图 


在 制作 之 前 ， 同 样 先 要 分 析 一 下 效果 图 ， 分 清 页 面 中 的 内 容 和 修饰 部 分 。 主 体 部 分 的 效果 如 
图 18.8 所 示 。 
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18.8 主体 部 分 的 效果 


从 图 18.8 可 以 看 出 ， 左 侧 内 容 分 为 3 个 部 分 ， 分 别 为 搜索 (Search) 部 分 、 服 务 部 分 和 新 闻 部 分 。 
中 间 内 容 分 为 两 个 部 分 ， 分 别 为 展示 图 片 部 分 和 分 类 服务 部 分 。 右 侧 也 可 以 分 为 两 个 部 分 ， 分 别 为 关 
于 网 站 部 分 和 欢迎 图 片 部 分 ， 所 以 可 以 定义 3 个 浮动 元 素 分 别 布局 这 3 个 部 分 的 内 容 。 


18.4.2 制作 主体 左 侧 部 分 的 结构 


主体 左 侧 部 分 的 结构 ， 可 以 分 为 下 面 3 部 分 来 制作 。 
1. 搜索 部 分 的 结构 


搜索 部 分 主要 是 由 一 个 文本 框 和 一 个 按钮 构成 。 
【代码 18-5】 搜 索 部 分 放 入 结构 的 代码 如 下 所 示 : 


re 代码 18-5: 搜索 部 分 放 入 结构 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


1 <divid="content"> 

2 <I-============ 左 侧 内 容 部 分 开始 =================--> 

3 <div class="left"> 

4 <div class="search"> 

5 <form name="name1" action="™" > 

6 <input type="text" size="20" name="" value="" class="botton_left"/> 

区 <input type="image" src="images/index_33.gif" name="" class="botton" /></form> 
8 <div class="clear"></div> <!--====== 清 除 浮动 元 素 === = 一 > 

9 


</div> 
10 </div></div> 
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【深入 学 习 】 第 6 行 是 一 个 文本 框 ， 第 7 行 是 一 个 图 像 按 钮 ， 第 8 行 用 来 清除 浮动 元 素 。 
注意 : 为 了 控制 同行 显示 ,要 使 用 浮动 属性 ， 为 了 兼容 浏览 器 ， 还 要 添加 清除 浮动 的 元 素 。 
2. 服务 列表 部 分 的 结构 


服务 列表 部 分 主要 由 项 部 的 圆 角 、 列 表 标 题 和 列表 内 容 构成 。 
【代码 18-6】 服 务 列表 部 分 的 结构 代码 如 下 所 示 : 


代码 18-6: 服务 列表 部 分 的 结构 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


1 <divclass="services_lefttop"></div> 

区 <div class="services_lefttitle"><span class="titlewhite"><a href="#">Services</a></span></div> 
3 <div class="services_leftcontent"> 

4 <u> 

5 <li><a href="#">Service class one</a></li> 

6 <li><a href="#">Service class two</a></li> 
区 <li><a href="#">Service class three</a></li> 
8 <li><a href="#">Service class four</a></li> 
9 <li><a href="#">Service class five</a></li> 
0 <li><a href="#">Service class six</a></li> 

;| </ul></div> 


【深入 学 习 】 第 5 一 6 行使 用 了 一 个 列表 项 ， 其 中 设置 了 6 个 链接 。 
说 明 : 在 主体 结构 制作 中 ， 将 标题 部 分 分 成 几 种 颜色 进行 独立 控制 ， 所 以 使 用 一 个 span 元 素来 进行 控 
制 。 因 为 页 面 中 间 部 分 还 包括 服务 部 分 ， 所 以 在 左 侧 部 分 的 类 名 中 加 入 了 left 字 样 用 来 区 分 。 
3. 新 闻 部 分 的 结构 
新 闻 部 分 也 是 由 标题 和 内 容 两 大 部 分 构成 的 ， 为 了 确定 高 度 和 背景 ， 要 将 内 容 部 分 放 到 一 个 父 元 
i 18-7】 新 闻 部 分 的 结构 代码 如 下 所 示 : 


代码 18-7: 新 闻 部 分 的 结构 代码 


源码 路 径 : 光盘 \ 源 文件 \18\index.html 


1 <divclass="newstitle"><span class="titlewhite">News</span></div> 

学 <div class="newscontentbig"> 

3 <div class="newscontent"> 

4 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 

5 <ahref="#">Here is some news content can be shown in the latest relevant news.</a></div> 
6 <div class="newscontent"> <!--==: 

区 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 

8 Hereis some news content can be shown in the latest relevant news.</div> 

9 


<div class="newscontent"> <!--====== 重 复 的 新 闻 ========--> 
10 <div class="newscontenttitle"><a href="#">News Headlines</a></div> 
11 Hereis some news content can be shown in the latest relevant news.</div> 
2 <div class="newscontent"> 


ss pa at 


13 


层 中 。 


<div class="newscontenttitle"><a href="#">News Headlines</a></div> 
14 Hereis some news content can be shown in the latest relevant news.</div></div> 


【深入 学 习 】 第 4 一 6 行 是 内 容 部 分 第 一 条 新 闻 。 所 有 的 新 闻 都 放 在 一 个 名 为 newscontentbig 的 div 


18.4.3 制作 主体 左 侧 部 分 的 样式 


与 结构 部 分 相对 应 ， 样 式 部 分 也 分 为 3 个 主要 部 分 。 在 制作 具体 样式 之 前 ， 首 先 要 制作 页 面 父 元 
素 的 样式 。 


1. content 和 left 元 素 的 样式 


content 元 素 中 ,主要 定义 元 素 的 宽度 和 居中 属性 , 使 主体 内 容 部 分 和 头 部 对 齐 。left 部 分 定义 左 侧 
内 容 的 宽度 。 
【代码 18-8】content 和 left 元 素 的 样式 代码 如 下 所 示 : 


#content{ 
width:790px; 
margin:0 auto 16px; 
padding-top:5px;} 
leftf 
float:left; 
width:191px;} 


2. 标题 部 分 样式 


标题 部 分 样式 ， 分 别 定义 在 tilewhite 和 titlered 两 个 类 选择 符 中 。 
【代码 18-9】 标 题 部 分 样式 的 代码 如 下 所 示 : 


[您 
一 一 一 中 ooDwm 上 whN 一 
PN 口 


.titlewhite{ 

margin-left:18px; 

font-size:14px; 

Color:#ffffff: 

font-weight:bold; 

font-family: "Times New Roman", Times, serif} 
.titlewhite af 

font-size:14px; 

font-weight:bold; 

font-family: "Times New Roman", Times, serif} 
titlered{ 

margin-left:15px; 


让 浮动 属性 进行 定位 */ 


定义 标题 的 字体 */ 
/定义 标题 含有 链接 时 的 样式 */ 


13 font-size:14px; 

14 font-weight:bold; 

1 color:#cc0000; 

16 font-family: "Times New Roman", Times, serif} 
3. 搜索 部 分 样式 
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搜索 部 分 的 样式 主要 是 定义 表单 的 位 置 、 文 本 框 的 大 小 以 及 按钮 与 文本 框 的 间隔 等 属性 。 
【代码 18-10】 搜索 部 分 样式 的 代码 如 下 所 示 : 


| .Search{ 

2 margin-bottom:8px; 
3 width:191px;} 

4 .search input{ 

5 margin-left:5px; 

6 height:18px;} 

7 .botton_left{ 

8 float:left; 

9 display:block;} 

10 .botton{ 

| float:left; 

2 margin:0 0 4px 2px;} 


4. 服务 列表 部 分 样式 


/定义 搜索 部 分 与 下 面 内 容 的 间隔 */ 
/定义 文本 框 左 侧 的 间隔 */ 


/定义 浮动 属性 控制 元 素 的 位 置 */ 


服务 列表 部 分 样式 主要 包括 定义 头 部 圆 角 、 标 题 和 列表 ， 其 中 包括 列表 的 位 置 、 间 隔 、 字 体 和 链 


接 等 样式 。 
【代码 18-11】 服 务 列表 部 分 样式 的 代码 如 下 所 示 : 


| .Services_lefttop{ 

区 width:191px; 

证 background:url(../images/index_37.gif) no-repeat; 
4 background-color:##ffffff; 

人 height:5px; 

6 font-size:0;} 

7 .services_lefttitle{ 

8 background-color:#006699; 

9 height:20px;} 

10 .services_leftcontent{ 

jk | background-color:#eQedf3; 

和 height:140px; 

13 padding:10px 0 14px 10px;} 
14 .services_leftcontent Ii{ 

15 margin-bottom:10px; 

16 font-size:12px; 


/定义 头 部 圆 角 */ 


/取消 默认 高 度 %/ 


/标题 部 分 的 高 度 "/ 
/定义 服务 列表 的 背景 
/定义 服务 列表 的 高 度 % 

广内 容 与 顶部 和 底部 的 间隔 */ 


让 列表 内 容 的 间隔 */ 


+CSS 网 页 设计 详解 


uk padding-left:20px:; 

18 background:url(../images/ar.gif) no-repeat left;} 广 列表 背景 */ 

19 .services_leftcontent lia{ 

20 color#539CC0; 

21 font-size:12px;} 

【深入 学 习 】 这 部 分 的 样式 中 ， 要 注意 的 就 是 关于 宽度 的 部 分 ， 要 保证 内 容 的 宽度 不 超过 父 元 素 
的 宽度 ， 否 则 会 导致 页 面 变 形 。 一 个 可 行 的 技巧 是 ， 尽 量 少 定义 子 元 素 的 宽度 ， 而 使 用 补 白 和 边界 属 
性 进行 元 素 的 定位 。 因 为 在 框 模型 部 分 曾经 讲解 过 ， 在 水 平方 向 上 ， 默 认 的 宽度 和 边界 会 自动 添 满 元 
素 的 内 容 。 
注意 : 在 列表 中 ， 使 用 背景 和 补 白 属性 显示 列表 前 的 修饰 图 片 的 技巧 。 

5. 新 闻 部 分 样式 


新 闻 的 标题 部 分 和 服务 部 分 基本 相同 ， 采 用 背景 颜色 的 方式 来 修饰 。 同 时 在 新 闻 内 容 部 分 的 父 元 
素 中 定义 合适 的 高 度 ， 用 来 显示 新 闻 部 分 的 背景 。 在 每 一 条 新 闻 内 容 中 ， 定 义 边框 的 样式 来 进行 分 隔 。 
【代码 18-12】 新 闻 部 分 样式 的 代码 如 下 所 示 


1 .newstitle{ A* 定 义 标题 样式 */ 

2 width:181px; 让 注意 宽度 的 计算 */ 

| margin:16px 0 0; 让 定义 标题 与 上 面 内 容 的 间隔 */ 
4 background-color:#006699; 

性 padding:5px;} 

6 .newscontentbig{ "定义 新 闻 内 容 样式 */ 

区 width:184px; 

8 height:327px; 

9 padding:5px 0 3px 7px; 让 定义 边界 与 内 容 的 间隔 */ 


10 background-color:#CDE3EC;} 

11 .newscontent{ 

2 width:177px; 

13 border-top:#666666 1px dashed; * 定 义 虚线 分 隔 内 容 */ 
14 padding:3px 0 20px 0; 

15. line-height:16px;} 

16 .newscontent af 

由 Color:#58595B;} 

18 .newscontenttitle a{ 

19 text-decoration:underline; 让 新 的 链接 样式 ， 添 加 下 划 线 */ 
20 Color:#024592; 

21 font-weight:bold;} 


【深入 学 习 】 此 时 左 侧 新 闻 内 容 的 具体 高 度 并 不 能 确定 ， 因 为 要 保证 左 侧 内 容 、 中 间 内 容 和 右 侧 
内 容 的 高 度 相 同 ， 最 终 的 高 度 要 等 待 其 他 两 个 部 分 的 内 容 都 确定 后 才能 确定 。 
【运行 效果 】 定 义 了 以 上 样式 后 ， 页 面 的 显示 效果 如 图 18.9 所 示 。 
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图 18.9 定义 左 侧 内 容 后 的 显示 效果 


18.4.4 制作 主体 中 间 部 分 的 结构 


主体 中 间 部 分 的 结构 可 以 分 为 展示 图 片 部 分 和 服务 分 类 部 分 。 

1. 展示 图 片 部 分 的 结构 

展示 图 片 部 分 的 结构 比较 简单 , 可 以 不 用 任何 包含 元 素 , 直接 放 在 middle 元 素 之 中 , 不 过 由 于 img 
元 素 是 内 联 元 素 ， 所 以 还 要 增加 一 个 附加 的 clear 元 素 (或 者 定义 展示 图 片 为 块 元 素 ) 来 换行 显示 。 其 
具体 的 代码 如 代码 18-13 所 示 。 

【代码 18-13】 展 示 图 片 部 分 的 结构 代码 如 下 所 示 : 


区 一 胡琴 18-13， 展 示 图 片 部 分 的 8 和 fT 
me 源码 路 径 : 光盘 '\ 源 文件 \18\index.html 


1 <divclass="middle"> 

六 <img src="images/show.jpg" class="middle_show" alt="pic" /> <!- 插 入 图 片 --> 
3 <div class="clear"></div> 
4 </div> 


注意 : 图 片 的 宽度 和 高 度 ， 属 于 图 片 的 表现 部 分 ， 所 以 不 要 定义 在 img 元 素 里 。 

2. 服务 分 类 部 分 的 结构 

服务 分 类 部 分 主要 由 几 个 重复 的 部 分 组 成 。 其 中 为 了 制作 各 个 展示 内 容 之 间 的 分 隔 线 ， 将 5 个 展 

示 的 内 容 分 成 3 类 : 左 侧 内 容 、 右 侧 内 容 和 底部 中 间 内 容 。 每 个 展示 部 分 的 图 片 、 标 题 和 内 容 ， 都 使 
相同 的 样式 。 

【代码 18-14】 服 务 分 类 剖 


分 的 具体 代码 如 下 所 示 : 


CSS 网 页 设计 详 外 


37 </div> 


代码 18-14: 服务 分 类 部 分 具体 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


<div class="middlecontentbig"> 
= 服务 部 分 左 侧 内 容 
middleleft"> 
ges/pic1 jpg" width="81" height="81" alt="pic" /> 
<div class="piccontent"> 
<div class="pictitle"><a href="#">Scenic Display </a> </div> 
<a href="#">Here is a scenic display of the pictures.</a> </div></div> 
<|--=: 一 一 一 
<div class="middleright"> 
<img src="images/pic2.jpg" width="81" height="81" alt="pic" /> 
<div class="piccontent"> 
<div class="pictitle"><a href="#">Scenic Display </a> </div> 
<a href="#">Here is a scenic display of the pictures.</a></div></div> 
<div class="clear"></div> 


= 服务 部 分 重复 内 圭一 > 
<div class="middleleft"> 
<img src="images/pic3.jpg" width="81" height="81" alt="pic" /> 
<div class="piccontent"> 
<div class="pictitle"><a href="#">Scenic Display </a></div> 
<a href="#">Here is a scenic display of the pictures.</a></div></div> 
<div class="middleright"> 
<img src="images/pic4.jpg" width="81" height="81" alt="pic" /> 
<div class="piccontent"> 
<div class="pictitle"><a href="#">Scenic Display </a></div> 
<a href="#">Here is a scenic display of the pictures.</a></div></div> 
<div class="clear"></div> 


<I-==: 


<!-==: === 服 务 部 分 底部 居中 的 内 容 
<div class="middlecenter"> 
<img src="images/pic5.jpg" width="81" height="81" alt="pic" /> 
<div class="piccontentcenter"> 
<div class="pictitle"><a href="#">Scenic Display </a></div> 
<a href="#">Here is a scenic display of the pictures.</a></div> 
<div class="clear"></div></div> 


【深入 学 习 】 这 个 部 分 的 页 面 内 容 比较 多 ， 但 并 不 复杂 。 因 为 每 个 服务 项 目 展 示 的 部 分 ， 都 是 由 
图 片 、 图 片 标题 和 图 片 内 容 3 个 部 分 组 成 。 在 此 基础 上 ， 将 同样 结构 的 内 容 分 别 放 在 不 同 的 容器 中 ， 
就 构成 了 服务 展示 部 分 的 页 面 。 


18.4.5 制作 主体 中 间 部 分 的 样式 


对 应 中 间 部 分 的 结构 ， 样 式 部 分 也 可 以 分 为 两 个 部 分 来 讲解 。 在 制作 具体 内 容 之 前 ， 依 然 先 定义 


他 
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父 元 素 的 样式 。 
1. 定义 middle 元 素 的 样式 
因为 首页 和 其 他 级 别 页 面 的 中 间 部 分 的 宽度 是 不 同 的 ， 所 以 此 时 可 以 不 定义 middle 元 素 的 宽度 ， 
而 只 定义 它 的 浮动 属性 ， 此 时 middle 元 素 的 宽度 由 它 所 包含 的 元 素 决定 。 
【代码 18-15】middle 元 素 的 样式 代码 如 下 所 示 : 


1 .middle{ 
2 float:left; /定义 middle 元 素 左 浮动 */ 
3 margin-left:18px;} 

4 .middle af 

5 color#58595b:} 


说 明 : 该 样式 中 ,定义 margin 属 性 的 目的 是 使 middle 元 素 中 的 内 容 部 分 与 左 侧 内 容 之 间 分 开 一 定 的 距离 ， 
同时 定义 了 中 间 部 分 链接 的 样式 。 


2. 定义 展示 图 片 的 样式 
展示 图 片 的 样式 ， 主 要 是 定义 图 片 的 宽度 和 高 度 。 
【代码 18-16】 展 示 图 片 的 样式 代码 如 下 所 示 : 


1 .middle_show{ 
区 width:390px; 
3 height:227px;} 


3. 服务 展示 内 容 部 分 

这 个 部 分 的 样式 稍 显 复 杂 ， 可 以 分 为 以 下 几 个 部 分 进行 定义 。 
(1) services 标题 部 分 

services 标题 部 分 ， 是 指 页 面 中 含有 文本 Services 的 部 分 。 
【代码 18-17】services 标题 部 分 的 代码 如 下 所 示 : 


1 .middletitle{ 
< width:390px; 
3 margin:16px 0 8px;} 


说 明 : 该 样式 主要 定义 了 标题 部 分 与 上 面 图 片 和 下 面 内 容 之 间 的 间隔 。 


(2) 3 个 位 置 的 容器 和 其 中 图 片 的 样式 
【代码 18-18】 处 在 左 侧 、 右 侧 和 底部 中 间 的 3 个 容器 和 包含 图 片 的 样式 的 代码 如 下 所 示 : 


ss 网 页 设计 主人 


代码 18-18: 处 在 左 侧 、 右 侧 和 底部 中 间 的 3 个 容器 和 包含 图 片 的 样式 的 代码 
源码 路 径 : 光盘 \ 源 文件 \18\style\main.css 


1 .middleleft{ ”定义 处 在 左 侧 容器 的 样式 */ 
ps float:left; 

3 padding-bottom:5px; 

4 border-right:#666666 1px dashed; 让 定义 分 隔 线 的 样式 */ 

5 border-bottom:#666666 1px dashed; 

6 width:194px;} 

7 .middle img{ 

8 float'left} "定义 图 片 的 位 置 */ 

9 .middleright{ "定义 处 在 右 侧 容器 的 样式 */ 
10 float:left; 


11 padding-bottom:5px; 

12 border-bottom:#666666 1px dashed; 
13 width:194px;} 

14 .middlerightimg{ 


15 margin-left:10px;} /精确 定义 图 片 与 分 隔 线 间 的 距离 */ 
16 .middlecenter{ "定义 处 在 底部 中 间 容 器 的 样式 */ 


入 border-bottom:#666666 1px dashed; 

18 width:390px; 

19 line-height:15px; 

20 padding:5px 0 10px;} "控制 图 片 的 精确 位 置 */ 


【深入 学 习 】 这 一 部 分 的 样式 ， 主 要 是 定义 各 个 元 素 的 宽度 ， 以 及 其 中 内 容 之 问 的 精确 分 隔 距离 。 

(3) 定义 图 片 标题 和 内 容 的 样式 

定义 图 片 标题 和 内 容 的 样式 ， 其 中 图 片 标题 可 以 使 用 一 个 统一 的 样式 ， 由 于 底部 中 间 部 分 的 显示 
效果 ， 会 略 有 不 同 ， 所 以 需要 单独 定义 。 

【代码 18-19】 图 片 标题 和 内 容 的 样式 代码 如 下 所 示 : 


;| .piccontent{ 

之 float:left; 

3 margin:3px auto 4px 10px; A 精确 控制 内 容 的 位 置 */ 
4 height:80px; 让 定义 内 容 的 高 度 */ 

5 line-height:15px;} 

6 .pictitle af ”重新 定义 链接 的 样式 */ 
冯 Color:#58595b; 

8 font-size:11px; 

9 font-weight:bold;} 

10 .piccontentcenter{ 

11 float:left; 

12 width:295px; 让 定义 底部 中 间 的 独立 显示 效果 */ 
143 margin-left:5px; 

14 height:80px;} 


注意 : 图 片 内 容 和 图 片 的 大 小 都 是 有 限制 的 ， 因 为 此 时 容器 的 高 度 依赖 于 内 容 的 多 少 ， 过 多 的 内 容 会 
导致 页 面 变形 。 


@ 
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【运行 效果 】 定 义 完 中 间 内 容 的 样式 后 ， 页 面 的 显示 效果 如 图 18.10 所 示 。 


bere 5 30me pers contert can be 
own in he larest elevane news, 


图 18.10 定义 了 中 间 内 容 样式 后 的 显示 效果 
18.4.6 ”制作 主体 右 侧 部 分 的 结构 


主体 右 侧 部 分 的 结构 可 以 分 为 两 个 部 分 ， 关 于 网 站 部 分 和 欢迎 图 片 部 分 。 

1. 关于 网 站 的 部 分 的 结构 

关于 网 站 部 分 的 结构 ， 大 致 可 以 分 为 下 面 几 个 部 分 : 头 部 圆 角 、 标 题 、 内 容 、 更 多 和 底部 圆 角 。 
【代码 18-20】 关 于 网 站 部 分 的 结构 代码 如 下 所 示 : 


re 代码 18-20: 关于 网 站 部 分 的 结构 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


<div class="aboutuscontent"> 
You are welcome to visit our website, we will be dedicated to serving you! 
9 Youare welcome to visit our website, we will be dedicated to serving youl 
10 You are welcome to visit our website, we will be dedicated to serving youl</div> 


| <div class="aboutusmore"> 

1 <div class="more"><a href="#">more<img src="images/index_144.gif" alt="pic" /></a></div> 
13 <div class="clear"></div></div> 

14 

15 <div class="aboutusbottom"></div> 

16 </div> 


ss Raat 


【深入 学 习 】 这 里 通过 div 分 出 页 面 主体 右 侧 部 分 的 结构 ， 上 面 已 经 介绍 了 包括 哪些 结构 ， 这 里 
只 是 提醒 读者 ， 底 部 圆 角 是 通过 样式 来 实现 的 。 


2. 欢迎 图 片 的 部 分 
欢迎 图 片 部 分 的 结构 相对 来 说 要 简单 得 多 ， 只 有 一 个 图 片 部 分 和 一 个 欢迎 文本 部 分 。 
【代码 18-21】 欢 迎 图 片 部 分 的 结构 代码 如 下 所 示 : 


办 ”代码 18-21: 欢迎 图 片 部 分 的 结构 代码 
源码 路 径 : 光盘 \ 源 文件 18index html 


<div class="clear"></div> 


注意 : 因为 主体 内 容 左 侧 、 中 间 和 右 侧 3 个 部 分 的 定位 中 ， 都 使 用 了 浮动 属性 ， 所 以 在 最 后 还 要 添加 一 
个 清除 浮动 的 元 素 ， 保 证 页 面 在 各 个 浏览 器 中 正常 显示 。 


18.4.7 ”制作 主体 右 侧 部 分 的 样式 


对 应 右 侧 结构 部 分 ， 依 然 分 两 个 方面 来 定义 右 侧 部 分 的 样式 。 
1. 制作 关于 网 站 部 分 的 样式 


关于 网 站 部 分 的 样式 ， 和 前 面 章节 中 讲解 的 圆 角 框 的 制作 方法 类 似 。 分 别 用 背景 图 片 制作 头 部 和 
底部 的 圆 角 部 分 ;然后 用 设置 背景 颜色 的 方法 ， 制 作 中 间 内 容 部 分 ， 来 衔接 头 部 和 底部 的 圆 角 。 
【代码 18-22】 制 作 关 于 网 站 部 分 的 样式 代码 如 下 所 示 : 


| 


1 .right{ 

float:right;} 

3 .righta{ ”重新 定义 链接 的 样式 */ 
4 color:#58595B;} 

5 .aboutustop{ 

6 width:171px; 

7 height:6px; 

8 background: url(../images/index_29.gif) no-repeat; 。“/* 用 背景 图 片 制作 头 部 圆 角 */ 
9 font-size:0;} 

10 .aboutustitle{ 

gl width:171px; 

这 height:20px; 

13 background-color:#CDE3EC;} 

14 .aboutuscontent{ 

15 background:#cde3ec; 
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16 height186px: "定义 容器 的 高 度 */ 

17 width:151px; 

18 padding:0 10px: /容器 内 容 的 的 左右 空白 % 
19 line-height:18px;} 

20 .aboutusmore{ 

Fa background:#cde3ec; 

width:171px;} 

23 .more{ 

24 float:right; 

25 margin:0 10px 10px 0;} A 控制 文本 的 精确 位 置 */ 
26 .aboutusbottom{ 

27 width:171px; 

28 height:4px; 

29 font-size:0px; 

30 background:url(../images/index_53.gif) no-repeat:} 让 制作 底部 圆 角 */ 


注意 : 这 个 地 方 使 用 的 页 面 结构 并 不 是 最 好 的 页 面 结构 ， 这 一 点 从 制作 样式 表 时 就 可 以 看 出 来 。 此 时 
样式 表 中 定义 了 大 量 重 复 的 宽度 属性 。 如 果 给 关于 网 站 部 分 和 欢迎 部 分 制作 一 个 父 元 素 ， 则 可 
以 一 次 性 定义 所 有 的 宽度 。 所 以 在 制作 的 过 程 中 ， 一 定 要 随时 分 析 页 面 结构 的 合理 性 。 


【代码 18-23】 定 义 父 元 素 后 的 页 面 结构 如 下 段 代码 所 示 : 


代码 18-23: 定义 父 元 素 后 的 页 面 结构 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


>_right"> 
= 中 间 省 略 了 原来 定义 的 关于 网 站 和 欢迎 图 片 部 分 的 结构 


> 


</div> 
【深入 学 习 】 在 home-right 选择 符 中 定义 如 下 样式 : 
.home_right{ 
width:171px;} 
这 样 ， 就 可 以 去 掉 其 子 元 素 中 所 有 宽度 的 定义 了 。 其 好 处 在 于 更 改 右 侧 内 容 宽度 更 加 简单 。 不 好 
的 地 方 在 于 增加 了 页 面 元 素 。 


2. 制作 欢迎 图 片 部 分 的 样式 
【代码 18-24】 这 部 分 的 样式 比较 简单 ， 具 体 代 码 如 下 所 示 : 


1 .welcomepic{ 
2 margin-top:16px;} 控制 图 片 的 位 置 */ 
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.welcomecontent{ 
background-color:#EO0EDF3; 
height:126px; 让 控制 背景 的 高 度 使 其 与 左 侧 和 中 间 基 本 相同 */ 
text-align:center; 
padding: 10px;} 


【运行 效果 】 定 义 了 右 侧 样式 后 ， 页 面 显示 效果 如 图 18.11 所 示 。 


IE 
EC 


» Sevice dhss one 


NOG 


3 Sevice 


3 Se 


> Sen 


i dedicated to seving you! 


mores 


Here 6 some news cortent can be 
onowr In the latest ralevant neve. 


Scenic Dioploy 
ee Mere 2 scemc ap of te ptures. WecometoRome 
News Headines 4 

bees onenns ottonbe 。 服 寺 不 

Showr in the lotest relevant nevs. Re 


18.11 定义 了 右 侧 样式 后 的 效果 


18.5 制作 首页 的 底部 


首页 底部 的 制作 相对 来 说 简单 一 些 ， 主 要 也 是 由 3 个 部 分 组 成 的 ， 分 别 是 左 侧 的 贺 角 、 中 间 的 内 
容 和 右 侧 的 圆 角 ， 其 效果 如 图 18.12 所 示 。 


Welcome to *** 


图 18.12 底部 的 效果 
【代码 18-25】 底 部 的 页 面 结构 代 码 如 下 所 示 : 


代码 18-25: 底部 的 页 面 结构 代码 
源码 路 径 : 光盘 \ 源 文件 \18\index.html 


g| <div class="footer"> 

4 <div class="footerleft"></div> 

3 <div class="footercontent"> 

4 <div class="footercontentleft">Welcome to ******.com</div> 

5 <div class="footercontentright">2006 International</div></div> 
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6 <div class="footerright"></div></div> 
【深入 学 习 】 页 面 底部 的 结构 很 简单 ， 左 右 两 侧 是 用 来 制作 圆 角 的 ， 中 间 的 内 容 又 分 成 左右 两 个 
部 分 。 


1 .footer{ 

2 margin:0 auto; 让 定义 父 元 素 的 居中 */ 
3 width:790px; 

2 height:36px; 

5 padding-bottom:5px;} 
6 .footerleft{ 

区 float:left; 

8 background:url(../images/index_83.gif) no-repeat left; 让 制作 左 侧 圆 角 */ 
9 width:5px; 

10 height:26px;} 

11 .footercontent{ 

12 float:left; 

13 width:780px; 

14 height:26px; 


15 background-color:#006699;} 内 容 部 分 的 背景 */ 
16 .footercontentleft{ 
17 float:left; 


18 margin:3px 0 0 10px; 
19 Color-#ffffff; 

20 font-weight:bold;} 

21 .footercontentright{ 

22 float:right; 

ps margin:3px 0 0 10px; 
24 Color-#ffffff; 

25 font-weight:bold;} 


26 
27 .footerright{ 
28 float:left; 


29 background:url(../images/index_86.gif) no-repeat right; 让 制作 右 侧 圆 角 */ 
30 width:5px; 
31 height:26px;} 


【深入 学 习 】 第 2 行 是 定义 父 元 素 的 居中 ， 这 种 方法 在 界面 设计 中 常常 用 到 。 第 8 行 和 第 29 行 制 


作 的 是 圆 角 界面 。 
【运行 效果 】 此 时 页 面 底部 的 显示 效果 如 图 18.13 所 示 。 
Welcome to 2006 International 


图 18.13 定义 样式 后 的 底部 效果 
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18.6 ”二 级 页 面 的 制作 
从 效果 图 中 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 和 底部 都 是 相同 的 ， 所 以 只 需要 更 改 首 页 中 
间 内 容 部 分 和 右 侧 部 分 就 可 以 了 。 
18.6.1 分析 二 级 页 面 的 效果 图 


二 级 页 面 的 中 间 内 容 部 分 的 效果 如 图 18.14 所 示 。 
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18.14 二 级 页 面 内容 部 分 的 效果 


从 图 18.14 可 以 看 出 , 此 时 中 间 内 容 部 分 是 由 上 面 的 展示 图 片 和 下 面 的 新 闻 列 表 组 成 的 。 新 闻 列 表 
部 分 又 分 为 日 期 和 内 容 两 个 部 分 。 右 侧 部 分 是 由 一 个 列表 和 一 个 图 片 组 成 。 下 面 详细 讲解 具体 的 制作 


18.6.2 制作 二 级 页 面 中 间 内 容 部 分 的 结构 
在 制作 二 级 页 面 之 前 ， 首 先 要 在 页 面 头 部 文件 中 增加 链接 新 样式 表 的 代码 ， 如 下 所 示 : 


<link href="style/newsroom.css" type="text/css" rel="stylesheet" /> 


中 间 图 片 展示 的 部 分 可 以 使 用 首页 的 结构 。 不 同 之 处 在 于 ， 此 时 图 片 使 用 的 样式 不 同 ， 因 为 此 时 
图 片 的 宽度 和 首页 图 片 的 宽度 不 同 。 接 下 来 的 部 分 是 一 个 标题 ， 然 后 是 分 隔 的 颜色 块 ， 再 下 面 是 日 期 
和 标题 的 列表 。 
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【代码 18-27】 二 级 页 面 中 间 内 容 部 分 的 结构 代码 如 下 所 示 : 


| <div class="middle"> 

2 <img src="images/newsroom.jpg" alt="event" /> 

3 iv class="clear"></div> 

4 < = 标题 部 分 == 这 

号 <div class="two_middletitle"><span class="titleblue">Newsroom</span></div> 

6 

法 

8 

9 <div Ge "two_middlecontentbig"> 

10 <div class="left_list"> < 上 -日 期 -> 

11 <ul> 

12 <li>Sep 01 2006</li> 

13 <li>Aug 29 2006</li> 

14 <li>Aug 29 2006</li> 

15 <li>Aug 29 2006</li> 

16 <li>Aug 29 2006</li> 

ke <li>Aug 29 2006</li> 

18 <li>Aug 29 2006</li> 

19 <li>Aug 29 2006</li> 

20 </ul></div> 

| <div class="right_list"> <!-- 内 容 列 表 --> 

22 <ul> 

23 <li><a href="#"> 

24 Here is some news content can be shown in the latest relevant news.</a></li> 
25 <li>Here is some news content can be shown in the latest relevant news</li> 
26 <li>Here is some news content can be shown in the latest relevant news</li> 
2 <li>Here is some news content can be shown in the latest relevant news</li> 
28 <li>Here is some news content can be shown in the latest relevant news.</li> 
29 <li>Here is some news content can be shown in the latest relevant news</li> 
30 <li>Here is some news content can be shown in the latest relevant news</li> 
31 <li>Here is some news content can be shown in the latest relevant news</li></ul></div> 
32 <div class="clear"></div> 

33 </div> 

34 </div> 


【深入 学 习 】 第 10 一 20 行 是 左 侧 列表 ， 按 时 间 排 列 ， 第 21 一 31 行 是 右 侧 列表 ， 显 示 新 闻 内 容 。 


注意 : 因为 新 闻 内 容 部 分 是 用 程序 显示 的 ， 所 以 不 用 将 所 有 的 含有 链接 的 列表 都 制作 成 空 的 链接 ( 空 
链接 的 意思 是 路 径 为 “# ”的 链接 ) 。 


18.6.3 制作 二 级 页 面 中 间 内 容 部 分 的 样式 


这 个 部 分 的 样式 可 以 分 为 两 个 部 分 ， 叫 分 是 其 他 二 级 页 面 也 会 使 用 的 公用 样式 ， 另 一 部 分 是 新 
闻 页 面 独 立 使 用 的 样式 。 其 中 ， 公用 样式 要 定义 在 mian.css 中 ， 独 立 的 样式 定义 在 newsroom.css 之 中 。 
下 面 分 别 进行 制作 。 


337 


SS 网 页 设计 评 角 


1. 制作 页 面 中 间 内 容 公 用 的 样式 


二 级 页 面 的 公用 样式 包括 图 片 大 小 、 标 题 和 分 隔 色 块 等 。 
【代码 18-28】 页 面 中 间 内 容 公用 的 样式 代码 如 下 所 示 : 


1 .titleblue{ 所 有 二 级 页 面 内 容 部 分 使 用 的 标题 */ 
你 margin-left:10px; 

3 font-size:18px; 

4 color-#006599; 

三 font-family:Arial, Helvetica, sans-serif} 

6 .two_showpic{ 让 二 级 页 面 展 示 图 片 的 大 小 */ 

7 width:416px; 

8 height:87px;} 

9 .two_middletitle{ 二 级 页 面 标 题 与 图 片 的 距离 */ 
10 margin-top:16px;} 

11 .spaceline{ /二 级 页 面 中 的 分 隔 色 块 %/ 


12 height:22px; 
ij width:400px; 
14 margin:6px 0 10px 10px; 
15 background-color:#EOEDF3;} 
【深入 学 习 】 因 为 以 上 样式 ， 所 有 的 二 级 页 面 都 将 使 用 ， 所 以 可 以 定义 在 main.css 中 ， 便 于 其 他 
二 级 页 面 调用 。 
2. 制作 页 面 中 间 内 容 独 立 的 样式 


新 闻 页 面 中 间 部 分 的 独立 样式 ， 主 要 是 对 两 个 列表 的 控制 。 其 中 包括 列表 的 宽度 、 文 本 和 链接 等 


【代码 18-29】 制 作 页 面 中 间 内 容 独 立 的 样式 的 代码 如 下 所 示 : 


1 .left list{ /使 用 浮动 属性 对 左 侧 列表 定位 ， 同 时 定义 宽度 */ 
必 float:left; 

本 width:120px; 

4 margin-left:-6px;} 

5 .left listli{ "定义 列表 的 高 度 等 属性 */ 

6 Color:#006599; 

7 height:52px; 

8 line-height:20px;} 

9 .right list{ /使 用 浮动 属性 控制 右 侧 列表 与 左 侧 列表 同行 显示 */ 
10 width:280px; 

414 float:left;} 

12 .right list li{ 

19 height:52px; 

14 line-height:20px;} 

15 .right_list lia{ /定义 链接 的 颜色 

16 Color:#58595b;} 
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注意 : 列表 部 分 的 样式 ， 主 要 是 通过 使 用 补 白 、 边 界 和 行 高 等 属性 将 各 个 列表 元 素 区 分 开 。 
【运行 效果 】 eect alae 分 样式 后 ， 显 示 效 果 如 图 18.15 所 示 。 
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图 18.15 定义 完 页 面 中 间 部 分 样式 后 的 显示 效果 
18.6.4 制作 二 级 页 面 右 侧 部 分 的 结构 


二 级 页 面 右 侧 部 分 的 结构 比较 简单 ， 包 括 一 个 标题 、 一 个 列表 和 一 幅 图 片 。 
【代码 18-30】 二 级 页 面 右 侧 部 分 的 结构 代码 如 下 所 示 : 


_. 源 


1 <div class="right"> 

区 <div class="two_rightcontent"> 

3 <div class="press_title"><a href="#">Success stories</a></div> ”<!-- 标 题 部 分 --> 
4 <ul> <!- 列 表 部 分 --> 
5 <li><a href="#">2006</a></li> 

6 <li><a href="#">2005</a></li> 

WE <li><a href="#">2004</a></li> 

8 <li><a href="#">2003</a></li> 

9 <li><a href="#">2002</a></li> 

10 <li><a href="#">2001</a></li> 

11 <li><a href="#">2000</a></li> 

3 <li><a href="#">1999</a></li> 

13 <li><a href="#">1998</a></li></ul> 

14 <a href="#"><img src="images/contact.jpg" width="104" height="129" alt="pic" 
15 /1></a> <!-- 图 片 部 分 --> 

16 </div> 

17 </div> 


_ 夯 ) 


ss 网 页 设计 主人 


【深入 学 习 】 第 5 一 13 行 是 一 个 列表 , 第 14 行 是 一 幅 图 片 , 这 个 图 片 的 文件 地 址 通过 src 属性 决定 。 
说 明 : 在 定义 结构 时 ， 要 合理 利用 元 素 的 包含 关系 ， 尽 量 减少 页 面 元 素 的 数量 。 


18.6.5 制作 二 级 页 面 右 侧 部 分 的 样式 


因为 整个 二 级 页 面 的 右 侧 内 容 都 将 使 用 现在 的 样式 ， 所 以 要 把 右 侧 的 样式 都 定义 在 main.css 文件 
之 中 。 
【代码 18-31】 二 级 页 面 右 侧 部 分 的 样式 代码 如 下 所 示 : 


1 .two_rightcontent{ A* 定 义 右 侧 内 容 的 高 度 和 背景 */ 
2 background-color:#cde3ec:; 
3 width:136px; 
4 height:590px; 
5 padding:10px 10px 0;} A* 定 义 内 容 与 边界 的 间隔 */ 
6 .two_rightcontent img{ 
区 margin:40px 0 0 16px:} A* 定 义 图 片 的 位 置 */ 
8 .two_rightcontent Ili{ 
9 line-height:20px;} A* 定 义 列表 的 间隔 */ 
10 .two_rightcontent af 
| color:#006699; /定义 新 的 链接 样式 人 
12 text-decoration:underline; 
9 font-size:11px;} 
注意 : 上 述 代 码 通过 注释 可 以 看 出 ， 第 8~ 9 行 定义 的 是 列表 的 间隔 ， 这 样 是 为 了 让 列表 看 起 来 更 舒适 、 
更 美观 。 


【运行 效果 】 页 面 在 定义 右 侧 内 容 后 ， 显 示 效 果 如 图 18.16 所 示 。 


ee 


图 18.16 定义 完 右 侧 样式 后 的 显示 效果 


第 18 齐 “你 合 案例 3 制作 基文 南 Ce 
至 此 ， 二 级 页 面 就 制作 完成 了 。 
18.8 小 结 
本 章 制作 的 虽然 是 一 个 英文 网 站 ， 但 整个 分 析 思 路 和 中 文 网 站 并 没有 什么 区 别 。 本 章 开 始 首先 介 
绍 如 何 进行 主页 面 的 切 图 ， 然 后 介绍 如 何 制作 首页 的 头 部 ， 其 次 是 首页 的 主体 部 分 ， 最 后 才 是 首页 的 


底部 。 制 作 完 主 页 后 ， 本 书 才 开始 介绍 二 级 页 面 的 制作 。 和 希望 读者 通过 领会 本 章 的 分 析 思 路 ， 能 够 掌 
握 网 站 的 制作 流程 和 技巧 。 
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制作 中 文 网 站 


镶 m 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 19 章 \ 制 作 站 点 首页 头 部 .wmv、 制 作 首页 的 主体 部 分 .wmv、 
制作 站 点 首页 底部 .wmv、 二 级 页 面 的 制作 .wmv 

在 制作 网 页 时 ， 使 用 可 视 化 的 开发 工具 ， 不 但 简单 易 用 ， 而 且 可 以 大 大 提高 站 点 开发 的 效率 。 本 
章 主要 讲解 怎样 使 用 可 视 化 开发 工具 Dreamweaver 进行 标准 网 站 的 开发 。 其 中 包括 一 个 完整 的 站 点 首 
页 和 一 个 二 级 页 面 的 制作 。 通 过 本 章 的 学 习 ， 要 重点 掌握 使 用 Dreamweaver 添加 页 面 元 素 和 样式 的 方 
法 ， 以 及 用 可 视 化 开发 工具 制作 页 面 时 需要 注意 的 问题 等 知识 。 本 章 的 主要 知识 点 如 下 : 

效果 图 的 分 析 。 

站 点 首页 的 制作 。 

二 级 页 面 的 制作 。 

兼容 问题 及 解决 。 


19.1 分 析 效 果 图 


在 本 案例 中 ， 同 样 也 只 讲解 站 点 首页 和 一 个 二 级 页 面 的 制作 方法 ， 其 他 页 面 的 制作 ， 可 以 采用 类 
似 的 方法 。 站 点 首页 的 效果 如 图 19.1 所 示 。 


19.1 站 点 首页 的 效果 


第 19 章 综合 案例 4: 使 用 Dreamweaver 制作 中 


二 级 页 面 的 效果 如 图 19.2 所 示 。 


1. 首页 的 分 析 


图 19.2 站 点 二 级 页 面 的 效果 


注意 : 从 图 19.1 和 图 19.2 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 和 底部 是 相同 的 ， 右 侧 部 分 的 宽度 和 
样式 也 是 相同 的 ， 区 别 在 于 内 容 不 同 。 


从 图 19.1 可 以 看 出 ， 首 页 在 纵向 上 可 以 分 为 3 部 分 : 头 部 (包括 logo 部 分 和 导航 ) 、 内 容 部 分 和 
底部 。 其 中 ， 中 间 内 容 部 分 又 可 以 分 为 两 部 分 : 左 侧 的 “部 内 公告 ”部 分 ; 右 侧 的 “关于 我 们 ”、“ 今 


日 新 闻 ” 和 相关 链接 的 部 分 
2. 二 级 页 面 的 分 析 


二 级 页 面 和 首页 的 结构 基本 相同 ， 其 区 别 在 于 二 级 页 面 右 侧 的 内 容 为 新 闻 列 表 。 


19.2 ”制作 首页 的 切 图 


分 析 完 页 面 结构 后 ， 就 要 进行 切 图 了 。 同 样 要 注意 文本 的 隐藏 、 切 片 的 选择 和 保存 格式 等 几 个 方 


面 。 下 面 进 行 详细 的 讲解 。 
在 制作 切 图 时 ， 首 先 要 


区 分 出 页 面 内 容 和 修饰 的 部 分 ， 然 后 分 析出 哪些 修饰 部 分 是 可 以 用 CSS 代 


码 来 实现 的 ， 哪 些 部 分 是 可 以 用 背景 图 片 来 实现 的 ， 哪 些 是 需要 知道 详细 宽度 的 。 在 制作 切 图 时 ， 首 


图 
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先 要 把 影响 背景 的 文本 内 容 去 掉 , 同时 要 尽量 减少 图 片 文 件 的 数量 。 制作 好 的 首页 切片 如 图 19.3 所 示 。 


如 证 券 点 播 


图 19.3 首页 的 切片 
图 19.3 的 切片 中 ， 可 用 作 背 景 的 图 片 包括 头 部 背景 、 导 航 背 景 、 主 体 背 景 、 底 部 背景 和 分 类 图 标 。 
其 他 的 图 片 为 内 容 图 片 。 切 好 图 后 ， 将 切片 保存 到 磁盘 相应 的 位 置 。 


注意 : 因为 实例 中 ， 二 级 页 面 内 容 部 分 没有 新 的 图 片 ， 所 以 可 以 不 进行 切 图 操作 。 新 建 一 个 站 点 ， 然 
后 把 使 用 到 的 图 片 放 入 images 文 件 夹 里 。 


CC 
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19.3 ”制作 站 点 首页 头 部 


做 好 准备 工作 后 ， 就 可 以 开始 制作 页 面 了 。 同 第 18 章 的 案例 制作 一 样 ， 首 页 头 部 也 要 分 成 几 个 部 
分 进行 制作 ， 下 面 分 别 进行 讲解 。 


19.3.1 首页 头 部 的 信息 和 基础 样式 的 制作 


首先 建立 index.html 页 面 。 关 于 建立 文件 的 方法 ， 前 面 章节 已 经 讲解 过 ， 这 里 不 再 讲解 。 然 后 制 
作 链 接 的 样式 文件 。 


1. 制作 链接 的 外 部 样式 文件 


(1) 选择 “文件 ” |“ 新建 ”命令 ， 新 建 一 个 CSS 文件 。 

(2) 选择 “文件 ” |“ 另存 为 ”命令 ， 将 新 建 的 CSS 文件 保存 在 style 文件 夹 中 ， 命 名 为 main.css。 

(3) 选择 “窗口 ” |“CSS 样式 ”命令 ， 打 开 “CSS 样式 ”面板 ， 如 图 19.4 所 示 。 单 击 “CSS 样 
式 ” 面 板 顶端 右 侧 的 按钮 ， 打 开 下 拉 菜单 ， 如 图 19.5 所 示 。 
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图 19.4 “CSS 样式 ”面板 19.5 “CSS 样式 ”面板 中 下 拉 菜 单 
(4) 选择 “附加 样式 表 ” 命 令 ， 进 入 “链接 外 部 样式 表 ” 对 话 框 ， 选 择 制作 的 main.css 文件 ， 如 
图 19.6 所 示 。 


一 ] 


19.6 “链接 外 部 样式 表 ” 对 话 框 


(5) 单 击 “ 确 定 ”按钮 ， 制 作 好 链接 的 外 部 样式 。 在 代码 视图 中 ， 对 应 的 代码 如 下 所 示 ; 
<link href="style/mian.css" rel="stylesheet" type="text/css" /> 
2. 设置 页 面 属性 


(1) 选择 “修改 ”|“ 页 面 属性 ”命令 ,进入 “页 面 属性 ”对 话 框 ， 如 图 19.7 所 示 。 页 面 属性 有 6 
个 分 类 ， 其 中 常用 的 是 定义 页 面 的 外 观 、 链 接 、 标 题 以 及 标题 /编码 。 在 本 案例 中 ， 所 选用 的 外 观 属性 
参数 如 图 19.8 所 示 。 
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图 19.7 “页 面 属性 ”对 话 框 图 19.8 关于 外 观 的 设置 


(2) 在 本 案例 中 ， 所 选用 的 链接 属性 参数 如 图 19.9 所 示 。 标 题 是 指 页 面 中 hl 一 h6 的 标题 元 素 的 
样式 ， 如 果 页 面 中 不 需要 ， 可 以 不 设置 相关 属性 。 

(3) 标题 /编码 是 指 页 面 的 标题 ， 默 认 的 设置 是 “无 标题 文档 ”， 所 以 要 重新 定义 页 面 标题 。 关 
于 编码 ， 中 文 常用 的 是 GB2312， 也 是 页 面 默认 的 编码 。 其 具体 的 参数 设置 如 图 19.10 所 示 。 
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图 19.9 链接 的 参数 设置 图 19.10 标题 /编码 的 参数 设置 


(4) 单 击 “ 确 定 ” 按 钮 ， 完 成 页 面 属性 的 定义 。 
此 时 , 定义 页 面 属性 所 产生 的 CSS 代码 会 显示 在 页 面 head 元 素 中 , 其 在 代码 视图 中 显示 的 代码 如 
代码 19-1 所 示 。 
【代码 19-1】 定 义 页 面 属性 所 产生 的 CSS 代码 如 下 所 示 : 


re 代码 19-1: 定义 页 面 属性 所 产生 的 CSS 代码 
源码 路 径 : 光盘 \ 源 文件 \19\style\main.css 
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1 <style type="text/css"> 

2 < 

3 bodytd,th{ 

4 font-family: 宋体 ; 

. font-size: 12px; 

6 color: #dddddd; 
ra 

8 body{ 

9 background-color: #044cba; 
10 margin-left: Opx; 

| margin-top: Opx; 

NP margin-right: Opx; 

SD margin-bottom: Opx; 
14 } 

便 af 

16 font-size: 12px; 

5 二 二 > 

18 ailink{ 

19 text-decoration: none; 
20 } 

21 a:visited { 

22 text-decoration: none; 
23 } 

24 a:hover{ 

25 text-decoration: none; 
26 color: #FFFF66; 

27 3 

28 a:active{ 

29 text-decoration: none; 
30 color: #FFFF66; 
S10 

32 -> 

33 </style> 


注意 : 显然 ， 这 种 在 页 面 中 调用 CSS 的 方式 并 不 方便 。 因 为 使 用 这 种 方式 ， 在 新 制作 的 每 一 个 页 面 中 
都 要 重新 定义 页 面 属 性 ， 所 以 要 将 style 元 素 中 的 CSS 代 码 粘 贴 到 main.css 文 件 中 ， 方 便 其 他 页 面 
的 调用 。 同 时 取消 style 元 素 的 定义 。 


【代码 19-2】 经 过 更 改 后， 页 面 头 部 的 代码 如 下 所 
办 代码 19-2: 页 面 头 部 的 代码 
源码 路 径 : 光盘 \ 源 文件 \19\index.html 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>css 实例 2</title> 

<link href="style/mian.css" rel="stylesheet" type="text/css" /> 

</head> 


omAoDm 上 上 whN 一 


347 


HTML+CSS 网 页 设计 详解 


和 修饰 的 部 分 。 头 部 的 效果 ， 


19.3.2 ”首页 头 部 的 分 析 
首先 还 是 对 首页 头 部 效果 图 进行 分 析 ， 主 要 目的 是 区 分 页 面 中 内 容 
如 图 19.11 所 示 。 


图 19.11 页 面 头 部 的 效果 
从 图 19.11 可 以 看 出 , 头 部 主要 分 为 两 个 部 分 , 其 中 导航 列表 以 上 的 部 分 可 以 用 背景 图 片 的 方式 实 


现 ， 但 是 由 于 图 片 比较 大 ， 所 以 分 两 个 部 分 来 显示 《目的 是 提高 图 片 的 加 载 速度 ) 。 
注意 : 头 部 下 面 是 一 个 导航 菜单 ， 因 为 使 用 了 一 个 大 的 背景 ,所 以 只 要 控制 好 导航 列表 的 显示 位 置 即 可 。 


19.3.3 ”首页 头 部 logo 和 banner 部 分 的 制作 
从 19.3.2 节 的 分 析 可 知 ， 首 页 头 部 结构 比较 简单 ， 主 要 由 两 个 用 来 显示 背景 的 元 素 和 一 个 用 来 显 
示 列 表 的 元 素 组 成 。 其 中 导航 列表 以 上 的 内 容 分 成 两 个 部 分 ， 分 别 是 logo 部 分 和 banner 部分。 下面 分 


别 讲解 详细 的 制作 过 程 。 
(1) 在 Dreamweaver 界面 的 设计 视图 中 , 选择 “插入 ”|* 布 局 对 象 "|*Div 标签 ” 命令, 进入“ 插 


入 Div 标签 ”对 话 框 ， 并 设置 相应 的 参数 ， 如 图 19.12 所 示 。 
说 明 : 在 插入 选项 中 ， 可 以 有 3 种 选择 。“ 在 插入 点 ”表示 在 光标 所 在 的 位 置 插 入 新 的 元 素 。 
设置 相应 的 参数 ， 如 图 19.13 


(2) 单 击 “新建 CSS 规则 ”按钮 ， 进入“ 新建 CSS 规则 ”对 话 框 ， 
[ES 于 一 
| 
这 办 品名 称 
过 天 各 入 和 迁 拌 品名 村 > 
PET Es LD 
Ee 在 二 入 点 一 一 
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En - | 
图 19.13 新建 header 元 素 的 CSS 规则 


添加 header 元 素 
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(3) 单 击 “ 确 定 ” 按 钮 ， 进 入 “CSS 规则 定义 ”对 话 框 ， 如 图 19.14 所 示 。 在 “CSS 规则 定义 ” 
对 话 框 的 分 类 中 ， 将 CSS 属性 分 为 9 类 ， 现 分 别 介绍 如 下 。 
类 型 : 主要 用 来 定义 文本 的 属性 ， 包 括 字 体 、 字 体 的 大 小 、 字 体 的 样式 、 加 粗 、 行 高 、 修 饰 和 颜 
色 等 属性 。 
背景 : 主要 用 来 定义 元 素 的 背景 属性 ， 包 括 背 景 颜色 、 背 景 图 片 、 背 景 附件 、 背 景 的 重复 和 位 置 
等 属性 。 
区 块 : 主要 用 来 定义 文本 的 缩 进 和 对 齐 属性 ， 包 括 水 平 对 齐 、 垂 直 对 齐 、 文 本 的 缩 进 和 空白 的 设 
置 等 属性 。 
方 框 : 主要 用 来 定义 元 素 除 边 框 外 的 盒 模型 区 域 和 浮动 属性 ， 包 括 宽度 、 高 度 、 补 白 、 边 界 、 浮 
动 和 清除 等 属性 。 
边框 ， 主 要 用 来 定义 边框 的 属性 ， 包 括 边框 宽度 、 边 框 样式 和 边框 颜色 等 属性 。 
列表 : 主要 用 来 定义 列表 的 相关 属性 ， 包 括 列 表 类 型 、 项 目 符号 替换 图 片 和 位 置 等 属性 。 
定位 : 主要 用 来 定义 定位 属性 ， 包 括 绝对 定位 、 相 对 定位 、 固 定 定位 以 及 各 个 方向 上 的 边 偏 移 属 
扩展 主要 用 来 定义 一 些 光 标 显示 ， 包 括 分 页 、 滤 镜 等 属性 。 其 中 ， 分 页 属性 中 的 :after 伪 类 的 用 
法 在 前 面 介 绍 过 ， 滤 镜 属性 本 书 中 不 做 介绍 。 
过 渡 : 主要 用 来 为 元 素 设 定 从 一 个 样式 转化 到 另外 一 个 样式 的 过 渡 效 果 。 
说 明 : 在 “CSS 规 则 定义 ”对 话 框 中 ， 除 “扩展 ”外 ， 大 多 数 属 性 本 书 都 已 经 做 过 详细 介绍 。 所 以 在 
使 用 Dreamweaver 定 义 元 素 属性 时 ， 只 需要 在 各 个 分 类 的 对 话 框 内 添加 相应 的 参数 即 可 。 


(4) ID 选择 符 header 中 ， 设 置 的 CSS 属性 如 图 19.14 和 图 19.15 所 示 。 
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19.14 “CSS 规则 定义 ”对 话 框 图 19.15 ”header 元 素 的 方 框 属性 
(5) 此 时 header 元 素 中 只 定义 了 方 框 属 性 ， 其 中 所 添加 的 参数 是 宽度 为 998px。 边 界 属性 中 ， 上 


下 边界 为 0， 左 右边 界 为 aato， 目 的 是 使 元 素 水 平 居中 显示 。 单 击 “ 确 定 ”按钮 ， 完 成 header 元 素 的 
样式 。 在 页 面 中 ， 删 除 软件 默认 添加 的 提示 内 容 ， 然 后 仿照 添加 header 元 素 的 方法 添加 其 他 元 素 。 


1. 制作 logo 元 素 的 样式 


(1) 选择 “插入 ”|“ 布 局 对 象 ”|“Div 标签 ”命令 ， 进 入 “插入 Div 标签 ”对 话 框 ， 并 设置 相应 
的 参数 , 如 图 19.16 所 示 , 然后 单 击 “ 新 建 CSS 规则 ”按钮 , 定义 logo 的 样式 , 其 具体 的 参数 如 图 19.17 


页 设计 详解 


和 图 19.18 所 示 。 
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19.17 logo 元 素 的 背景 属性 19.18 logo 元 素 的 方 框 属性 


(2) 定义 完 以 上 样式 ， 同 时 去 掉 软 件 自动 生成 的 内 容 后 ， 页 面 的 显示 效果 如 图 19.19 所 示 。 


图 19.19 定义 完 logo 元 素 样式 后 的 显示 效果 
2. 定义 banner 元 素 的 样式 


(1) 选择 “插入 ”|“ 布 局 对 象 ” |“Div 标签 ”命令 ， 进 入 “插入 Div 标签 ”对 话 框 ， 并 设置 相应 


的 参数 ， 如 图 19.20 所 示 。 
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图 19.20 ”添加 banner 元 素 
注意 : 在 添加 新 元 素 之 前 ， 一 定 要 把 光标 放置 在 相应 的 位 置 ， 例 如 ， 现 在 添加 的 banner 元 素 在 logo 元 素 
的 后 面 ， 所 以 可 以 使 用 键盘 上 向 右 的 方向 键 ， 将 光标 移动 到 logo 元 素 之 外 ， 再 按 图 19.20 所 示 的 
参数 添加 banner 元 素 。 如 果 在 设计 视图 中 无 法 看 出 光标 的 具体 位 置 ， 可 以 到 代码 视图 中 确认 。 
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(2) 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 banner 的 样式 ， 其 具体 的 参数 如 图 19.21 和 图 19.22 所 示 。 
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图 19.21 banner 元 素 的 背景 属性 图 19.22 ”banner 元 素 的 方 框 属性 


(3) 定义 完 banner 元 素 的 样式 ， 同 时 去 掉 软 件 自 动 生成 的 内 容 后 ， 页 面 的 显示 效果 如 图 19.23 所 示 。 
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图 19.23 定义 完 banner 元 素 样式 后 的 显示 效果 
19.3.4 “导航 列表 的 制作 


导航 列表 由 两 部 分 组 成 ， 分 别 用 来 显示 背景 的 父 元 素 和 显示 导航 内 容 的 列表 元 素 ， 其 具体 的 制作 
方法 如 下 所 示 。 

1. 父 元 素 menu 的 制作 

将 光标 移动 到 banner 元 素 之 外 ， 选 择 “ 插 入 ”|“ 布 局 对 象 ” |“Div 标签 ”命令 ， 进 入 “插入 Div 
标签 ”对 话 框 ， 在 相应 的 参数 中 ， 添 加 类 名 称 为 menu。 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 menu 的 样 
式 ， 其 具体 的 参数 如 图 19.24 和 图 19.25 所 示 。 


2. 列表 元 素 的 制作 


(1) 将 光标 移动 到 menu 元 素 之 内 ， 选 择 “ 插 入 ”|HTML|“ 文 本 对 象 ”|“ 项 目 列表 ”命令 ,添加 
项 目 列表 ， 然 后 选择 “插入 ”|IHTMLI“ 文 本 对 象 ”|“ 项 目 列表 ”命令 ,添加 列表 内 的 项 目 ， 同 时 添加 
内 容 “ 企 业 形 象 页 ”。 调 整 光标 ， 依 次 添加 其 余 的 列表 项 和 内 容 。 此 时 Dreamweaver 会 自动 切换 到 拆 
分 视图 。 在 拆 分 视图 中 ， 选 择 岂 元素 及 其 包含 的 二 元 素 。 右 击 ， 选 择 “CSS 样式 ” |“ 新建 ”命令 ， 进 
入 “新 建 CSS 规则 ”对 话 框 ， 此 时 对 话 框 中 将 会 有 默认 的 选择 符 ， 如 图 19.26 所 示 。 
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图 19.25 ”menu 元 素 的 方 框 属性 


图 19.26 新 建 CSS 规则 的 默认 参数 
(2) 使 用 默认 的 参数 ， 单 击 “ 确 定 ” 按 钮 ， 进 入 “CSS 规则 定义 ”对 话 框 ， 其 中 定义 的 样式 如 
19.27 和 图 19.28 所 示 。 
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图 19.27 定义 列表 的 方 框 属性 19.28 ”定义 列表 的 类 型 


(3) 在 拆 分 视图 中 选中 所 有 的 二 及 其 内 容 , 使 用 和 新 建 列表 样式 一 样 的 方法 , 建立 列表 项 的 样式 ， 
其 具体 参数 如 图 19.29 和 图 19.30 所 示 。 
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图 19.29 定义 列表 的 类 型 属性 图 19.30 定义 列表 的 方 框 属性 
(4) 以 上 定义 的 列表 属性 的 参数 是 随意 添加 的 ， 定 义 后 的 显示 效果 如 图 19.31 所 示 。 


图 19.31 定义 列表 属性 之 后 的 显示 效果 

(5) 从 图 19.31 可 以 看 出 ， 此 时 列表 存在 的 主要 问题 有 两 个 ， 一 个 是 列表 的 位 置 不 对 ， 另 一 个 是 
列表 内 容 之 间 的 间隔 过 宽 。 所 以 要 重新 更 改 列表 和 列表 内 容 属 性 ， 更 改 的 方法 是 单 击 “CSS 样式 ” 面 
板 上 的 “全 部 ”按钮 ， 打 开 所 有 的 CSS 样式 ， 如 图 19.32 所 示 。 


(6) 双击 选择 符 ， 重 新 打开 “CSS 规则 定义 ”对 话 框 ， 修 改 原 有 的 样式 文件 ， 最 终 列表 属性 中 的 
方 框 属性 的 参数 如 图 19.33 所 示 。 
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图 19.32 单 击 “ 全 部 ”按钮 后 的 面板 图 19.33 ”修改 后 的 列表 方 框 属性 
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(7) 将 列表 内 容 样式 中 的 字体 更 改 为 13px， 然后 更 改 列表 内 容 的 补 白 属性 ,修改 后 列表 内 容 的 方 


框 属性 的 参数 如 图 19.34 所 示 。 
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图 19.34 ”修改 后 的 列表 内 容 方 框 属性 
(8) 修改 后 的 页 面 显示 效果 如 图 19.35 所 示 。 
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图 19.35 修改 列表 属性 后 的 显示 效果 
注意 : 至 此 ， 站 点 首页 的 头 部 就 制作 完成 了 。 


19.4 制作 首页 的 主体 部 分 
首页 的 主体 部 分 可 以 分 为 两 部 分 ， 分 别 是 左 侧 包含 公告 的 侧 栏 部 分 和 右 侧 含有 新 闻 的 内 容 部 分 。 
下 面 分 别 讲解 它们 的 制作 过 程 。 


19.4.1 分析 主体 部 分 效果 图 


在 制作 之 前 ， 同 样 先 要 分 析 一 下 效果 图 ， 分 清 页 面 中 的 内 容 和 修饰 部 分 。 主 体 部 分 的 效果 如 
图 19.36 所 示 。 
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图 19.36 主体 部 分 的 效果 
从 图 19.36 可 以 看 出 , 左 侧 内 容 分 为 3 个 部 分 ， 分 别 为 “站 内 公告 ”、 热 点 推荐 和 “业务 咨询 热线 ” 
部 分 ; 右 侧 可 以 分 为 5 个 部 分 ， 分 别 是 “关于 我 们 ”、“ 今 日 新 闻 ”、“ 证 券 点拨 ”、“ 证 券 时 评 ” 
和 “合作 伙伴 ”部 分 。 下 面 分 别 进行 制作 。 


19.4.2 制作 主体 部 分 的 父 元 素 


主体 部 分 的 父 元 素 主要 定义 元 素 的 居中 和 背景 。 
(1) 选择 “插入 ”|“ 布 局 元 素 ”|“Div 标签 ”命令 ， 添 加 新 的 布局 元 素 。 其 中 参数 如 图 19.37 
所 示 。 


| 二 Aon 于 和 
E 亡 琵 _) 
二 和 | 在 和 总 = 
二 | - La] 
了 四 
大 建 C3S 规则 


图 19.37 添加 main 元素 
(2) 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 main 的 样式 ， 其 具体 的 参数 如 图 19.38 和 图 19.39 所 示 。 


注意 : 该 样式 使 用 边界 属性 ， 定 义 了 元 素 的 居中 ， 使 用 重复 属性 和 背景 图 片 定义 了 页 面 背 景 。 其 原理 
和 前 面 章节 中 使 用 原理 完全 相同 。 


Tn 


图 19.38 定义 main 元 素 的 背景 属性 图 19.39 定义 main 元 素 的 方 框 属 性 


19.4.3 制作 主体 左 侧 部 分 的 样式 


主体 左 侧 部 分 分 为 3 个 部 分 来 制作 。 
1. 制作 left 元 素 和 公告 部 分 


left 元 素 是 控制 整个 左 侧 内 容 的 位 置 、 宽 度 和 高 度 的 元 素 。 
(1) 选择 “插入 ”|“ 布 局 元 素 ”|“Div 标签 ”命令 ， 添 加 新 的 布局 元 素 。 定 义 类 名 为 left， 添 加 


left 元 素 。 
(2) 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 left 的 样式 ， 其 具体 的 参数 如 图 19.40 所 示 。 
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图 19.40 lef 元 素 的 方 框 属性 
(3) 接 下 来 制作 公告 部 分 ， 公 告 部 分 包括 两 个 方面 : 标题 和 公告 内 容 ， 首 先 制作 公告 标题 部 分 。 
同样 先 插入 一 个 div 元 素 ， 并 添加 类 名 为 notice title， 然 后 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 公 告 标 
题 的 样式 ， 其 具体 的 参数 如 图 19.41 和 图 19.42 所 示 。 
A 
告 ”。 


(4) 定义 完 公 告 标题 样式 后 ， 添 加 公告 标题 文本 “站 内 公 
(5) 最 后 制作 公告 内 容 部 分 ， 添 加 一 个 新 的 div 元 素 ， 定 义 类 名 为 notice-content， 然 后 单 击 “ 新 


建 CSS 规则 ”按钮 ， 定 义 公 告 内 容 的 样式 ， 其 具体 的 参数 如 图 19.43 和 图 19.44 所 示 。 
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19.43 ”公告 内 容 的 文本 属性 


定义 完 left 元 素 和 公告 样式 后 ， 页 面 的 显示 效果 如 图 19.45 所 示 。 
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19.44 公告 内 容 的 方 框 属性 


图 19.45 定义 了 left 元 素 和 公告 样式 后 的 效果 


2. 制作 热点 推荐 部 分 


热点 推荐 部 分 由 3 个 结构 样式 相同 的 部 分 组 成 ， 下 面 以 其 中 的 一 个 为 例 ， 讲 解 制作 方法 。 
(1) 在 公告 的 后 面 添 加 一 个 div 元 素 ， 定 义 类 名 为 hot， 然 后 单 击 “ 新 建 CSS 规则 ”按钮 ， 定 义 


公告 标题 的 样式 ， 其 具体 的 参数 如 图 19.46 所 示 。 


(2) 添加 完 hot 元 素 后 ， 在 元 素 中 添加 图 片 元 素 ， 选 择 添 加 的 图 片 ， 右 击 添加 样式 ， 如 图 19.47 


和 图 19.48 所 示 。 


(3) 添加 热点 的 标题 和 内 容 。 添 加 标题 “房地产 ”， 同 时 给 标题 添加 空 的 超 链 接 。 在 拆 分 视图 中 ， 


选择 a 和 其 中 的 内 容 ， 右 于 


添加 样式 ， 使 用 默认 值 ， 如 图 19.49 所 示 。 


_ 回 ) 
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图 19.46 hot 元素 的 方 框 属性 图 19.47 图 片 的 方 框 属性 
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图 19.48 图 片 的 边框 属性 图 19.49 添加 标题 的 链接 样式 
(4) 添加 的 链接 样式 如 图 19.50 所 示 。 在 拆 分 视图 的 代码 </a> 后 面 ， 添 加 换行 符号 <br/>， 然 后 添 
加 热点 的 内 容 。 此 时 热点 部 分 的 显示 效果 如 图 19.51 所 示 。 
nan lef hot a CSS EY (E mines Fo L | 


类 型 
Font-fanti ly " 国 
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Trieeeratima0): 目 wiineon Cel 0) :ER | 
walise0) 
Biseedrd 
Bincg) 
加 swe) 
EE [要 双 [ 靖 WW ] 
图 19.50 标题 的 文本 属性 图 19.51 热点 部 分 的 显示 效果 


(5) 从 图 19.51 可 以 看 出 ， 此 时 主要 的 问题 是 行 高 的 问题 ， 所 以 要 修改 hot 的 样式 ， 添 加 行 高 属 


性 ， 如 图 19.52 所 示 。 
(6) 在 拆 分 视图 的 代码 窗口 中 ， 将 hot 元 素 和 其 包含 的 元 素 进行 复制 和 粘贴 ， 制 作 另 外 两 个 样式 


第 19 章 综合 案例 4: 使 用 Dreamweaver 制作 


和 结构 相同 的 内 容 ， 然 后 修改 图 片 和 热点 标题 。 最 终 热 点 部 分 的 显示 效果 如 图 19.53 所 示 。 
i 
- 国 
[ uatresiaht 0): 3 
Ww 中 : 豆 i 3 


[到 人 


图 19.52 添加 行 高 属性 
3. 制作 咨询 热线 部 分 
咨询 热线 部 分 的 制作 很 简单 ， 只 需要 添加 一 个 div 元 素 ， 同 时 定义 好 行 高 ， 在 内 容 中 将 标题 和 联 


系 电 话 用 换行 符号 分 隔 成 两 行 即 可 。 添 加 div 元 素 ， 定 义 类 名 为 contact， 并 设置 其 样式 ， 如 图 19.54 
和 图 19.55 所 示 。 


图 19.53 热点 部 分 的 显示 效果 
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图 19.54 ”contact 元 素 的 行 高 属性 
注意 : 至 此 ， 主 体 左 侧 的 内 容 就 制作 完成 了 。 


19.55 contact 元 素 的 方 框 属性 


19.4.4 制作 主体 右 侧 内 容 中 “关于 我 们 ”的 部 分 


在 制作 右 侧 的 具体 内 容 之 前 ， 首 先 要 制作 控制 所 有 内 容 显 


1. 制作 父 元 素 right 


示 位 置 的 父 元 素 right。 


调整 光标 到 left 元 素 结束 符 的 后 面 ， 添 加 新 的 元 素 ， 定 义 类 名 为 right， 同 时 定义 样式 ， 其 参数 如 


图 19.56 所 示 。 
2. 制作 “关于 我 们 ”部 分 


(1) 添加 一 个 控制 “关于 我 们 ”部 分 的 元 素 ， 用 来 控制 所 有 “关于 我 们 ”内 容 的 位 置 。 


全 


(2) 添加 一 个 新 的 div 元 素 ， 定 义 类 名 为 aboutus， 并 设置 其 样式 ， 如 图 19.57 所 示 。 
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图 19.56 right 元 素 的 方 框 属性 图 19.57 aboutus 元 素 的 方 框 样式 


(3) 在 aboutus 元 素 里 添加 新 的 div 元 素 ， 定 义 类 名 为 content title， 并 设置 其 样式 ， 如 图 19.58 一 
图 19.60 所 示 。 
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图 19.58 内容 标题 的 文本 属性 图 19.59 内容 标 题 的 背景 属性 
(4) 设置 完 内 容 标题 的 样式 后 ， 在 内 容 标 题 中 添加 一 个 类 名 为 title 的 元 素 ， 同 时 在 title 中 添加 标 
题 文本 “关于 我 们 ”因为 是 中 文 网 站 ， 所 以 用 “关于 我 们 ”替代 了 效果 图 中 的 About Us) ， 此 时 内 
容 标题 的 显示 效果 如 图 19.61 所 示 。 
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图 19.60 ”内 容 标题 的 方 框 属性 图 19.61 内 容 标题 的 显示 效果 
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(5) 之 后 再 添加 另 一 个 类 名 为 more 的 元 素 ， 同 时 在 more 元 素 中 添加 含有 链接 的 文本 more， 并 
且 定 义 title 元 素 的 样式 ， 如 图 19.62 所 示 。 设 置 more 元 素 的 属性 ， 如 图 19.63 所 示 。 
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图 19.62 title 元 素 的 方 框 属性 图 19.63 more 元 素 的 方 框 属性 


(6) 定义 more 中 的 链接 文本 样式 ， 如 图 19.64 所 示 。 
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19.64 ”more 元 素 中 的 链接 文本 样式 


(7) 因为 使 用 了 浮动 属性 ， 所 以 还 要 添加 一 个 清除 浮动 的 元 素 ， 其 中 样式 参数 的 设置 如 图 19.65 
和 图 19.66 所 示 。 
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19.65 ”清除 浮动 元 素 的 行 高 属性 


图 19.66 清除 浮动 元 素 的 方 框 属 性 


(8) 接 下 来 添加 展示 图 片 和 “关于 我 们 ”部 分 的 内 容 。 选 择 添加 的 图 片 并 右 击 ， 添 加 CSS 样式 ， 
有 具体 参数 如 图 19.67 和 图 19.68 所 示 。 
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图 19.67 展示 图 片 的 方 框 属性 图 19.68 展示 图 片 的 边框 属性 


此 时 “关于 我 们 ”部 分 的 显示 效果 如 图 19.69 所 示 。 


从 图 19.69 可 以 看 出 ， 此 时 存在 的 问题 是 行 高 的 问题 ， 所 以 添加 aboutus 的 行 高 属性 ， 其 参数 如 
图 19.70 所 示 。 
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图 19.69 “关于 我 们 ”部 分 的 显示 效果 图 19.70 定义 aboutus 的 行 高 属性 
19.4.5 制作 “今日 新 闻 ” 部 分 


(1) 制作 “今日 新 闻 ” 部 分 ,同样 先 添加 新 的 元 素 ， 定义 类 名 为 news， 并 设置 其 参数 ， 如 图 19.71 
和 图 19.72 所 示 。 

(2) news 部 分 的 标题 可 以 使 用 “关于 我 们 ”部 分 定义 的 样式 ， 所 以 可 以 在 拆 分 视图 的 代码 窗口 
中 ， 直 接 复制 并 粘贴 “关于 我 们 ”部 分 的 相关 代码 ， 然 后 更 改 其 内 容 ， 此 时 “今日 新 闻 ” 部 分 的 显示 
效果 如 图 19.73 所 示 。 

(3) 从 图 19.73 可 以 看 出 ， 此 时 右 侧 文本 more 的 链接 样式 并 没有 实现 ， 其 原因 是 在 “关于 我 们 ” 
部 分 的 代码 中 ， 用 子 选择 符 的 方法 限定 了 more 的 位 置 。 在 样式 表面 板 中 ， 选 择 main.css， 右 击 “ 转 到 
代码 ”选项 ， 转 到 main.css 代码 页 面 ， 将 如 下 所 示 的 代码 : 


他 
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图 19.71 news 元 素 的 方 框 属性 
.main .right .aboutus .content_ title a 


更 改 为 下 面 的 代码 : 
.content_title a 


图 19.72 news 元 素 的 边框 属性 


其 中 ， 选 择 符 中 定义 的 样式 不 变 。 更 改 后 页 面 显示 效果 如 图 19.74 所 示 。 


图 19.73 “今日 新 闻 ” 部 分 的 显示 效果 


19.74 ”更 改选 择 符 后 的 显示 效果 


(4) 接 下 来 制作 新 闻 列 表 部 分 ， 使 用 与 添加 导航 列表 相同 的 方法 添加 列表 的 内 容 。 此 时 界面 会 自 
动 转 换 到 拆 分 视图 ， 在 代码 窗口 中 ， 选 择 ul 元 素 ， 定 义 类 名 为 newsnav， 同 时 定义 其 样式 ， 如 图 19.75 


和 图 19.76 所 示 。 
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19.75 ”新 闻 列 表 的 方 框 属性 


19.76 新闻 列表 的 列表 属性 


(5) 选择 其 中 的 列表 内 容 ， 右 击 并 选择 “CSS 样式 ”|“ 新 建 ”命令 ， 进 入 “新 建 CSS 规则 ”对 


话 框 ， 更 改 默认 选择 符 ， 如 图 19.77 所 示 。 


(6) 定义 新 闻 列 表 内 容 的 样式 ， 如 图 19.78 一 图 19.80 所 示 。 
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19.79 新闻 列表 内 容 的 方 框 属性 


19.80 新闻 列表 内 容 的 文本 属性 


(7) 定义 好 新 闻 列 表 属 性 后 ， 页 面 新 闻 部 分 的 显示 效果 如 图 19.81 所 示 。 


图 19.81 新 闻 部 分 的 显示 效果 
19.4.6 制作“ 证券 点 拨 ” 和 “证 券 时 评 ”部 分 


“证 券 点 拨 ” 和 “证 券 时 评 ” 部 分 的 样式 基本 相同 ， 区 别 在 于 位 置 不 同 。 可 以 使 用 两 个 浮动 的 元 


素 ， 分 别 控制 两 个 部 分 的 位 置 。 下 面 分 别 进行 制作 。 
1. 制作 “证 券 点 拨 ” 部 分 


(1) 首先 添加 新 的 元 素 ， 并 定义 类 名 为 urged， 然 后 定义 元 素 的 样式 ， 如 图 19.82、 图 19.83 所 示 。 
(2) 标题 部 分 依然 可 以 使 用 复制 、 粘 贴 的 方法 ， 统 一 使 用 content title 部 分 的 结构 和 样式 。 这 里 


不 再 讲解 。 


的 
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,urged 的 CSS 规则 定义 (在 miancss 中 ) 三 3 urged 的 Css 和 证 义 (在 miancss 中 ] EJ 

i 方 要 一 a 

. mm Ei EF Sen 

E YY enan ~ RA | 

到 mm: | iom:5 有 上 络 
EE 3 阳 尚 “| [ 应 两 史 LW 已 葬 _ ] 峭 |][ 应 EW | 
图 19.82 urged 的 方 框 属性 图 19.83 urged 的 边框 属性 

(3) 内 容 列表 的 制作 方法 和 新 闻 部 分 的 列表 制作 方法 类 似 ， 其 区 别 在 于 背景 和 补 白 属性 不 同 ， 首 


先 定义 点 拨 列 表 ul 的 属性 。 选 择 ul 和 其 中 的 内 容 ， 右 击 进 入 “新 建 CSS 规则 ”对 话 框 ， 更 改 默认 的 
参数 ， 如 图 19.84 所 示 。 


晰 建 CS5 规则 E53 
3 书本 站 
为 Css 涡 风 各 摊 上 下 文 过 掺 访 类 型 。 
| Cm 
选择 器 名 称 - 
选择 或 答 入 和 至 吕 名 各 


出 同 于 一 


19.84 列表 的 默认 参数 


注意 : 这 样 更 改 的 主要 原因 是 因为 “证 券 时 评 ”部 分 将 使 用 相同 的 列表 样式 ， 如 果 不 取消 urged 类 ， 则 
“证 券 时 评 ” 部 分 的 列表 不 能 继承 现在 定义 的 列表 属性 。 


其 具体 的 参数 如 图 19.85 和 图 19.86 所 示 。 


smain right dl 的 C55 规则 定义 [在 miancss 中 Jmain right ul 的 555 姑 出 二 双 [在 miancts 中 ) LE 
分 站 2 得 es 下 
wake me E 
igh on "i at - ET 
Pauliine ua 
23 回 全 部 相同 
而 Tp0) :0 区 rmo vv 区 
Ratm :区 加 uatm 怕 
Bottmg) : BE Mum :6 
a) 匠 区 nam :pe 
ET LL 这 ]， BR |] [gw | Lm [上 织 | 聘 [请 W] 


图 19.85 ”列表 的 方 框 属性 


19.86 列表 的 列表 属性 


SS 网 页 设计 详解 


(4) 接 下 来 定义 的 属性 ， 其 具体 参数 如 图 19.87 所 示 。 
(5) 定义 完 标 题 、 列 表 属 性 后 的 页 面 显示 效果 如 图 19.88 所 示 。 


main right ul 的 CSS 规则 定义 [在 miancss 中 ) ¥ 
篇 加 
居 viam moat 
E ti 00 | et 
| Me papaan ”回避 相同 0) 
加 io | ww 司 
ao 习 基 司 | ua 
Dovton (i) : TE ES :em 
ao 吉 四 E 
[而 有 0 [六 证] 时 消 | [ 应 用 内 
图 19.87 列表 内 容 的 方 框 属性 图 19.88 “证 券 点 拨 ” 部 分 的 显示 效果 


2. 制作 “证 券 时 评 ” 部 分 

(1) 制作 “证 券 时 评 ” 部 分 浮动 的 父 元素 。 添 加 新 的 元 素 ， 定 义 类 名 为 comment， 设 置 其 样式 参 
数 ， 如 图 19.89 所 示 。 

(2) 将 “证 券 点 拨 ” 部 分 的 内 容 和 结构 复制 并 粘贴 到 comment 元 素 中 ， 更 改 相关 内 容 ， 显 示 效 果 


如 图 19.90 所 示 。 
comment 的 CSS 规则 定义 (在 mianics5 中 ee 
es 蚂 
条 
aa 0 id 
hiah 0 ve 7 ct) 日 
加 WY ena ea 
es 1o0: re ro 5 "Ee = 
Nom :im re 7 liom BE -le 
Bott 0) Btn 
Ly me Le 由 
区 .3 [项 ]_ 8 | L&W ] 
19.89 comment 元 素 的 方 框 属性 19.90 “证 券 点 氢 ” 和 “证 券 时 评 ” 部 分 的 显示 效果 


(3) 同样 ， 因 为 使 用 了 浮动 元 素 ， 所 以 还 要 使 用 清除 浮动 的 元 素 。 添 加 新 的 元 素 ， 在 “插入 Div 
标签 ”对 话 框 的 类 下 拉 菜 单 中 选择 clear 类 ， 制 作 清除 浮动 元 素 。 


19.4.7 ”制作 “合作 伙伴 ”部 分 
“合作 伙伴 ”部 分 的 制作 分 为 以 下 两 个 部 分 。 


1. 制作 “合作 伙伴 ”部 分 的 父 元 素 


添加 新 的 div 元 素 ， 定 义 类 名 为 partnership， 并 定义 其 样式 ， 如 图 19.91 和 图 19.92 所 示 。 
因为 partnership 元 素 中 含有 文本 ， 所 以 还 要 定义 行 高 属性 ， 其 参数 如 图 19.93 所 示 。 


局 
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中 artnership 的 CSS 规则 定义 (在 miancss 中 ) [3 parmnership 的 CSS 声 则 定义 [在 miancss 中 ) 3 
分 冯 方 在 分 全 wa | 
a 二 i 3 | 回 和 部 相 5) 回 全 二 0) 国 全 部 相同 四 
到 Budding Nargin | mm: sa 1 vB 局 3 
了 国 全 于 相配) 回 全 部 只 同 吕 ) ME I 
区 oo :0 了] 攻 司 || rw -i 
和 于 a 2 oem 四 :Fa | -人 
Rt E ae 四 TT 世 
em : [3 ll 
Btn) F ae 有 : 匠 F 
To EE Le 四 江 E 
EI [C 吏 ] 一 辆 -CEw ] LW [证 |] 取 沿 |[ 应 用 W 


图 19.91 ”partnership 元 素 的 方 框 属性 


parmership 的 C55 规则 定义 (在 mian.css 中 
分 类 2] 
Pn-fmily 0) 5 国 
eatsimeg)， > Toneeight MW): 四 


Totsle 


aerheiaht0D: 弛 


Teraeeorade 四 ) 


图 19.93 定义 partnership 元 素 中 的 文本 属性 
2. 制作 内 容 
(1) 添加 标题 图 片 ， 并 定义 其 浮动 属性 为 lft， 右 边界 属性 为 20px。 


19.92 ”partnership 元 素 的 边框 属性 


(2) 添加 “合作 伙伴 ”的 内 容 部 分 ,并 使 用 换行 符 <br'> 进 行 分 隔 。 此 时 页 面 的 显示 效果 如 图 19.94 


所 示 。 


(3) 从 图 19.94 可 以 看 出 ， 此 时 的 主要 问题 是 每 行 的 开头 部 分 的 链接 颜色 没有 改变 ， 所 以 要 重新 
定义 这 部 分 的 链接 样式 .选择 每 行 开头 的 链接 和 内 容 , 然后 添加 新 的 样式 , 定义 类 名 为 partnership_head， 


同时 设置 样式 ， 如 图 19.95 所 示 。 


parnership_head 的 CS5 知 RE 义 [在 miancss 中 区 
ke E43 
| = 国 
= 区 > 
| mt-variant (VY 证 
上 = [7 tert-teenstore 0) 四 
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19.94 


“合作 伙伴 ”部 分 的 显示 效果 


图 19.95 定义 新 的 链接 样式 


选择 其 他 的 内 容 ， 应 用 相同 的 样式 ， 制 作 好 每 行 开头 内 容 的 链接 颜色 。 
注意 : 因为 左右 两 侧 的 left 和 right 元 素 也 使 用 了 浮动 属性 ， 所 以 还 要 添加 一 个 相应 的 清除 浮动 元 素 。 


19.5 制作 首页 的 底部 


首页 底部 的 制作 相对 简单 一 些 ， 主 要 由 背景 和 居中 的 内 容 组 成 ， 其 效果 如 图 19.96 所 示 。 
[al 


图 19.96 底部 的 效果 


(1) 制作 底部 的 父 元 素 ， 定 义 类 名 为 footer， 其 样式 参数 如 图 19.97 一 图 19.100 所 示 。 
footer 的 CSS 规则 定义 [在 miancss 中 ] 一 :oter 的 CSS 规则 宇 义 (在 mian_cs5 中 ) [一 
分 类 此 
2 ED 位 一 
ont-eamtly 四 ， 7 国 | | Teexaont- ooln C) 国 
Fontmeirs By TE | pormiatm: 时 ckeremdrinep GT finsees/ind2_ 37 np — [MN 
| Tas = Patvaiuton = Mek end-repent OY aormea 
| 由 nei iD 可 基本 rareasemom: | Haceerent- attacneat 0 5 
| Tort-decoration D). 国 mdurlinemm Cort) :mT | Boskeromdpssition o0 TR ~ [7 
| 加 werline tb) | Deckgromeposition 0) tp [7 
回 1 sw-theweskG) 
周 wimxm) 
四 wo 
| 
| .| [本 _[ 瑞 ]_aw [ [Wo | [对 ] 了 着 ] [ERA ] 
L 
图 19.97 footer 元 素 的 文本 属性 19.98 footer 元 素 的 背景 属性 
Doter 的 CSS 姑 MY (在 mianess 中 ] 名 [ooter 的 C55 二 久 (在 miancss 中 ) Es 
和 由 5 村 | ER 
| Maa :mr es tt) E | repeatnegy 3 攻 
itm := et 司 | Latter-sparing 0): = 区 
日 而 名目 6) ephan | Wi -| 
过 om vv 区 moo ve » | 于 ntor = 
Neht 0) wh Mat) mte vile = 
Botton DE) 7) mn :0 = es) - 
Lr) 区 nD me -区 > Ee 
ET [本 ]_ 陋 JLNJ) 而 动 加 [| 
图 19.99 footer 元 素 的 方 框 属性 图 19.100 footer 元 素 的 区 块 属性 


(2) 在 footer 元 素 中 添加 内 容 ， 首 页 底部 就 制作 完成 了 。 
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19.6 二 级 页 面 的 制作 


从 效果 图 中 可 以 看 出 ， 首 页 和 二 级 页 面 的 头 部 、 左 侧 和 底部 都 是 相同 的 ， 所 以 只 需要 更 改 首页 右 
侧 内 容 部 分 即 可 。 二 级 页 面 的 中 间 内 容 部 分 的 效果 如 图 19.101 所 示 。 


图 19.101 二 级 页 面 内 容 部 分 的 效果 
从 图 19.101 可 以 看 出 ， 此 时 右 侧 内 容 部 分 是 一 个 新 闻 列 表 ， 其 标题 和 新 闻 列 表 内 容 的 样式 都 与 首 
页 的 相同 ， 所 以 可 以 使 用 首页 的 样式 。 
(1) 将 首页 另存 为 newsroom.html 页 ， 注 意 更 改 页 面 标 题 。 
(2) 将 首页 右 侧 的 无 关内 容 删 除 ， 删 除 后 的 页 面 显示 效果 如 图 19.102 所 示 。 


EE 


图 19.102 删除 右 侧 内 容 后 的 显示 效果 


SS Ra ait te 


(3) 将 “关于 我 们 ”修改 成 “今日 新 闻 ”, 并 添加 相关 的 新 闻 列 表 。 定义 列表 ul 的 样式 为 newsnav， 
页 面 的 显示 效果 如 图 19.103 所 示 。 


图 19.103 ”使 用 newsnav 列表 属性 后 的 效果 


(4) 接 下 来 制作 分 页 部 分 。 同 样 先 添加 一 个 div 元 素 ， 定 义 类 名 为 page， 设 置 其 方 框 属性 参数 ， 


如 图 19.104 所 示 。 


(5) 添加 分 页 的 内 容 ， 同 时 添加 select 表单 。 添 加 select 表单 的 方法 是 ， 选 择 “ 插 入 ”|“ 表 单 ” 


“列表 /菜单 ”命令 ， 添 加 表 


单 。 


(6) 选择 表单 添加 样式 ， 定 义 类 名 为 select， 其 具体 参数 如 图 19.105 所 示 。 


图 19.104 定义 page 元 素 的 方 框 属性 
(7) 定义 完 以 上 样式 后 ， 页 面 的 显示 效果 如 图 19.106 所 示 。 


,page 的 CSS 规则 定义 (在 miancss 中 ) . select 的 CS5 如 上 正义 [在 miancss 中 ] 
分 类 方 个 分 天 方 在 
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Bit :5 站 Rt) | auto 2 区 
aotmm :后 rem eg Iettm 区 
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图 19.105 ”定义 表单 的 样式 


图 19.106 二 级 页 面 最 终 的 显示 效果 
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19:7 水 结 


如 果 说 前 面 的 案例 全 部 是 手写 代码 ， 那 本 章 的 制作 方式 就 简单 多 了 。Dreamweaver 俗称 “网 页 剑 
客 ”， 就 是 专门 用 来 轻松 制作 网 页 的 工具 。 本 章 依据 第 18 章 案例 的 制作 思路 ， 通 过 Dreamweaver 进行 
一 些 设置 ， 可 以 自动 生成 网 页 所 需要 的 HTML 代码 和 CSS 代码 。 学 习 完 本 章 后 ， 读 者 会 发 现 拥有 一 个 
好 的 开发 工具 ， 可 以 更 方便 、 快 捷 地 制作 网 站 。 


附录 1 HTML 4.0 快速 参考 


HTML 虽然 比较 简单 ， 但 它 的 标签 名 称 和 属性 都 是 固定 的 ， 不 像 XML 那样 可 以 自己 定义 ， 本 附 
录 给 出 了 HTML 元 素 所 具有 的 通用 属性 ， 供 读者 参考 。 


附 1.1 通用 属性 


HTML 的 通用 属性 及 说 明 如 附 表 1.1 所 示 。 


附 表 1.1 通用 属性 及 说 明 

通用 属性 说 了 明 
ID 属性 为 文档 中 的 元 素 指定 了 一 个 独一无二 的 身份 标识 ,用 于 样式 表 和 脚本 引用 ,在 定义 ID 属性 时 ， 
必须 注意 此 属性 值 由 英文 字母 开头 ,后面 可 以 跟 任意 字母 (大写 A~Z 和 小 写 a~z) 、 数 字 (0~9) 、 
ID 连 字符 (-)、 下 划 线 (_) 、 冒 号 (:) 以 及 点 号 (.) 
注意 ; ID 属性 与 NAME 属性 使 用 相同 的 名 称 空间 ， 因 此 不 能 在 同一 个 文档 中 为 ID 和 NAME 属性 定 
义 相同 的 名 称 ， 以 防止 发 生 混乱 
Class 属性 定义 了 特定 标记 符 的 类 ， 用 于 样式 表 和 脚本 引用 。 使 用 Class 属性 可 以 为 标记 符 定义 类 别 ， 
此 时 可 以 说 该 标记 符 是 属于 该 类 别 的 。 一 个 类 别 中 也 可 以 包含 多 个 标记 符 

Style Style 属性 用 于 为 一 个 单独 的 标记 符 指 定 样 式 , 也 就 是 指定 行内 样式 (inline style, 也 叫做 直 插 式样 式 ) 
Title 属性 与 TITLE 标记 符 不 同 (TITLE 标记 符 在 文档 中 只 能 出 现 一 次 ) ， 它 可 以 为 文档 中 任意 多 个 
Title 标记 符 指定 参考 标题 信息 。 通 常 浏览 器 将 参考 标题 信息 以 即时 提示 〈tooltip， 也 叫做 工具 栏 提示 ) 的 
方式 显示 出 来 ， 以 便 浏 览 者 查看 


Class 


附 12 HTML 文档 结构 元 素 


HTML 文档 结构 元 素 及 说 明 如 附 表 1.2 所 示 。 
附 表 1.2 HTML 文档 结构 元 素 及 说 明 


语法 说 明 
<HTML> 开始 标记 符 和 结束 标记 符 都 可 以 省 略 。HTML 标记 
<HIML> 符 说 明 此 文档 是 一 个 HIML 文档 
开始 标记 符 和 结束 标记 符 都 可 以 省 略 。 HEAD 元 素 
<HEAD> 包含 文档 的 头 部 信息 ， 如 标题 、 关 键 字 、 说 明和 样 
</HEAD> 式 表 等 。 一 般 位 于 <HTMIL> 标 记 之 后 ，<BODY> 标 


记 之 前 。 对 于 框架 文档 ， 位 于 <FRAMESET> 标 记 


nzl mc 


之 前 
续 表 
语 法 常用 属性 说 有明 
BACKGROUND=URL (文档 的 背景 图 像 ) 
BEEO0OR CO 的 芒果 全 开始 标记 符 和 结束 标记 符 都 可 以 省 略 .BODY 元 素 
TEXT=Color (文档 中 文本 的 颜色 ) . 
LINK-Color (文档 中 链接 的 颜色 ) 
<BODY> a 对 于 非 框架 文档 ，BODY 位 于 HEAD 之 后 ; 对 于 
OD VLINK=Color (文档 中 已 被 访问 过 的 链接 的 颜色 》 框架 文档 ， 如 果 包 含 NOFRAMES 标记 符 ， 则 
a Dol CH BODY 必须 位 于 该 标记 符 内 ,否则 不 能 包含 BODY 
ONLOAD=Script 文档 加 载 时 执行 脚本 的 事件 ) 标记 符 
ONUNLOAD=Script( 文 档 退 出 时 执行 脚本 的 事件 ) 
通用 属性 
TITLE 标记 符 位 于 HEAD 标记 符 内 ， 它 包含 的 内 
<TITLE> 无 容 是 文档 的 标题 。 每 个 文档 在 HEAD 中 有 且 仅 有 
</TITLE> 一 个 TITLE。 TITLE 标记 符 中 包含 的 内 容 将 在 浏览 
器 的 标题 栏 中 显示 
NAME=name (名 字 ) META 标记 符 中 包含 了 网 页 的 元 数据 信息 , 诸如 文 
<META> HTTP-EQUIV=Name (HTTP 相应 标题 名 ) 档 关键 字 、 作 者 信息 等 。 文 档 的 HEAD 标记 符 内 
CONTENT=CDATA (相关 数据 ) 可 以 包含 任意 数量 的 <META> 元 素 
DIV 标记 符 用 于 包含 行内 元 素 ( 也 称 为 字符 级 元 素 
或 文本 级 元 素 ) 和 块 级 元 素 ， 以 便 定义 一 个 块 。 通 
ER 常 该 元 素 与 class 和 ID 等 属性 联合 使 用 , 以 便 在 样 
cr (水 平 对 齐 方式 》 | 式 表 中 为 某 一 块 内 容 定义 样式 。 如 果 不 使 用 样式 
表 , DIV 标记 符 常用 于 设置 段落 对 齐 。 例如 , <DIV 
align=center></DIV> 可 以 为 包含 在 其 中 的 内 容 设 
置 居中 对 齐 ( 与 <CENTER></CENTER> 相 同 ) 
SPAN 标记 符 与 DIV 标记 符 类 似 , 但 通常 用 于 包含 
<SPAN> 行内 元 素 。 例 如 , 如 果 定义 了 Di Ted{colorred}， 
区 通用 属性 则 可 以 使 用 以 下 语句 为 部 分 文本 设置 红色 : 
<P> 部 分 为 <SPAN class="red"> 红 色 </SPAN> 的 文 
本 </P> 
> |ALtGN=flef | center | right |justity]( 水 平 对 齐 方式 |H1~H6 元 素 用 于 定义 从 1~6 级 标题 ， 可 以 使 用 
i 通用 属性 align 属性 设置 标题 的 对 齐 方式 
<ADDRESS> 通用 属性 此 标记 符 用 于 提供 联系 信息 , 通常 用 斜体 字 显示 其 
</ADDRESS> 中 的 内 容 


附 下 3 过 未 


文本 元 素 说 明 如 附 表 1.3 所 示 。 


元 素 


TIL+CSS 网 页 设计 详解 


附 表 1.3 文本 元 素 及 说 明 


说 明 
ABBR 元 素 用 来 对 一 个 词组 进行 缩写 表示 ， 通 常 与 
title 属性 一 起 使 用 。 例 如 ，<ABBR title="Structured 


Os Query Languager>SQL</ABBR>， 则 当 浏览 者 将 鼠标 
指针 移动 到 SQL 字样 上 时 ， 将 显示 即时 提示 
Structured Query Language 
ACRONYM 元 素 被 用 来 标记 首 字母 缩 略 词 。 与 ABBR 
<ACRONYM> 元 素 类 似 ， 它 常常 与 tile 属性 一 起 使 用 。 例 如 ， 
</ACRONYM> <ACRONYM title="Structured Query Language">SQL 


</ACRONYM> 
BLOCKQUOTE 元 素 定义 了 一 个 块 引用 , 其 中 可 以 包 
含 块 级 元 素 (如 P 和 TABLE ) 。 表 示 
<BLOCKQUOTE></BLOCKQUOTE> 中 包含 的 内 容 
是 引 自 cite 属性 所 指定 的 源 ( 例 如 ， 
http://www.microsoft.com) 
CLEAR=[leftlallrightnone ] <BR> 标 记 符 用 于 强行 中 断 当前 行 ， 多 个 <BR> 标 记 符 
<BR> 《清除 浮动 对 象 ) 可 以 创建 多 个 空 行 。<BR> 标 记 符 通常 用 于 简单 的 格 
通用 属性 式 设 置 
i CITE 元 素 用 以 标记 引用 内 容 ， 诸 如 杂志 、 报 纸 的 标 
通用 属性 题 等 。 浏 览 器 一 般 将 <CITE></CITE> 中 的 内 容 显 示 
</CITE> 
为 斜体 
<CODE> CODE 元 素 用 于 标记 文档 中 的 代码 ， 通 常 浏览 器 将 
<CODE></CODE> 中 的 内 容 显示 为 等 宽 字 体 
DEL 元 素 用 来 标记 文档 中 已 删除 的 内 容 ， 可 以 用 title 
属性 给 出 简单 的 删除 原因 。 通 常 浏览 器 将 包含 在 
<DEL></DEL> 中 的 文字 添加 上 删除 线 。 为 确保 在 多 
数 浏览 器 中 都 可 以 有 删除 线 效果 ， 也 可 以 结合 使 用 
STRIKE 或 S 元 素 。 例 如 ， 以 下 语句 可 以 确保 在 多 数 
浏览 器 上 显示 下 删除 线 效果 : 
<DEL cite="www.mysite.com/book" title="Sold out"> 
<H3><S>《HTML4 教程 》</S></H3></DEL> 
DFN 元 素 用 于 指定 一 个 定义 , 在 浏览 器 中 通常 用 斜体 
字 显 示 
EM 元 素 用 于 对 其 中 包含 的 内 容 进行 强调 ， 通 常 浏览 


<BLOCKQUOTE> |CITE=URL (引用 源 ) 
</BLOCKQUOTE>| 通用 属性 


CITE=URL (包含 删除 原因 信息 的 URL) 
DATETIME=Datetime〈 删 除 时 间 ) 


Be 器 用 斜体 字 显示 <EM></EM> 中 包含 的 内 容 。 也 可 以 
使 用 样式 表 为 其 指定 特殊 效果 
HR> HR 元 素 用 于 在 网 页 中 添加 一 条 水 平 线 


374 


常用 属性 说 明 


CE-URL《〈 说 明 辆 入 原因 信息 所 在 的 | nNs 元 素 用 于 包含 被 插入 的 内 容 ， 以 下 划 线 显示 包 全 


URL) 
在 <INS></INS> 中 的 文字 。 用 户 也 可 以 自 定义 样式 表 ， 
DATETIME=Datetime (插入 时 间 ) 以 便 指定 特定 的 显示 格式 


通用 属性 
KBD 元 素 用 于 包含 键盘 输入 的 文字 ， 在 浏览 器 中 通 
da 常 以 等 宽 字体 显示 


结束 标记 符 可 以 省 略 ， 但 使 用 样式 表 时 请 使 用 结束 标 
ed 记 符 。P 元 素 用 于 在 网 页 中 分 段 


PRE 元 素 用 于 包含 预先 格式 化 的 文本 。 也 就 是 说 ， 包 
通用 属性 含 在 <PRE></PRE> 中 的 内 容 将 以 所 设置 的 格式 显示 
Q 元 素 用 于 表示 短 的 行内 引用 。 如 果 需 要 表示 更 长 的 引 
不 支持 此 元 素 ， 因 此 需要 用 样式 表 指 定 该 元 素 的 格式 
网 本 本 SAMP 元 素 标记 了 网 页 中 的 输出 样本 , 如 程序 的 输出 。 
a 通用 属性 通常 浏览 器 将 <SAMP></SAMP> 中 的 文字 以 等 宽 字 
体 显示 。 用 户 也 可 以 用 样式 表 自 定义 该 元 素 的 样式 


STRONG 元 素 用 于 对 包含 在 其 中 的 内 容 进 行 强调 , 浏 
览 器 通常 用 粗 体 字 显示 包含 在 <STRONG> 
</STRONG> 中 的 内 容 。 用 户 也 可 以 用 样式 表 来 规定 
显示 样式 
<SUB>...</SUB> SUB 元 素 用 于 定义 下 标 

SUP 元 素 用 于 定义 上 标 
VAR 元 素 用 以 标记 变量 或 程序 参数 。 浏 览 器 通常 用 
通用 属性 斜体 字 显示 包含 在 <VAR></VAR> 中 的 文字 。 也 可 以 
用 样式 表 自 定义 该 元 素 的 样式 


ALIGN=[left | center | right ljustify] (设置 水 


<STRONG> 


</STRONG> 用 及 仁 


附 1.4 字体 样式 元 素 


字体 样式 元 素 及 说 明 如 附 表 1.4 所 示 。 
附 表 1.4 ”字体 样式 元 素 及 说 明 


语 法 常用 属性 说 明 
<B>...</B> | 通用 属性 B 元 素 可 以 使 文本 以 粗 体形 式 出 现 
SIZE=CDATA (指定 默认 字体 大 小 ， 范 围 为 
1 一 7， 默 认 值 是 3) BASEFONT 元 素 允许 作者 规定 基本 字体 的 大 小 、 颜 色 
<BASEFONT> “|COLOR=Color (指定 默认 字体 颜色 ) 和 “字体 ”。 但 由 于 样式 表 的 出 现 ， 在 HIML 4.0 中 


EACE=CDATA (指定 默认 字体 ) 它 是 已 过 时 的 用 法 
ID=ID (唯一 的 PP) 


ss na et 


续 表 
语 法 常用 属性 说 有明 
<BIG>...</BIG> | 通用 属性 BIG 元 素 规定 文本 以 大 字体 显示 
A FONT 元 素 用 于 设置 所 包含 字体 的 大 小 、 颜 色 和 “ 字 
<FONT> COLOR=Color (字体 颜色 调整 ) 体 ”。 由 于 样式 表单 的 出 现 , FONT 元 素 在 HIML40 
<FONT> FACE=CDATA (字体 样式 调整 ) 局 属 忆 过 时 的 用 法 4 要 
通用 属性 
<P...<P 通用 属性 I 元 素 规定 文本 以 斜体 显示 
S 元 素 规定 文本 以 包含 删除 线 的 方式 显示 ， 效 果 与 
<S>...</S> 通用 属性 区 元 素 相同 
<SMALIL> 本 可 
以 小 示 
/SAT 通用 属性 SMALL 元 素 规定 文本 以 小 字体 显示 
<STRIKE> STRIKE 元 素 规 定 文本 显示 时 加 删除 线 ， 效 果 与 S 元 
通用 属性 2 
</STRIKE> 素 相同 


<TT>...<TT> ”| 通用 属性 
<U>...</U> 通用 属性 


TT 元 素 规定 文本 以 电报 文字 体 或 等 宽 字体 显示 
元 素 规定 文本 显示 时 加 下 划 线 


附 1.5 列表 元 素 


列表 元 素 及 说 明 如 附 表 1.5 所 示 。 
附 表 1.5 “列表 元 素 及 说 明 


语 法 常用 属性 说 了 明 
UL> 和 和 | or 元素 定 义 了 一 个 无 列表 ， 其 中 包含 一 个 或 多 个 I 元 素来 
ur |e 定义 实际 的 列表 项 
|r 元 素 定 义 了 一 个 有 序列 表 。OL 元 素 中 包含 一 个 或 个 I 
st 元 素来 定义 实际 的 列表 项 。 与 无 序列 表 不 同 ， 列 表 项 有 一 个 明 
. 确 的 顺序 。 有 序列 表 的 列表 项 由 浏览 器 自动 编号 
通用 属性 
TYPE=[ disc | square | circle |1|al A|ilI] 
A (列表 项 标记 样式 ) 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 结束 标记 。 LI 元素 
LEE |VALUE-Numiber (序列 号 ) 定义 了 一 个 列表 项 
通用 属性 
Ee DL 元 素 定 义 了 一 个 定义 列表 。 定 义 列表 中 的 条 目 是 通过 使 用 
ee DT 元 素 和 DD 元 素 创建 的 。DT 元 素 给 出 了 术语 名 ， 而 DD 元 
素 给 出 了 术语 的 定义 
了 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 结束 标记 。DT 元 
-DT 素 在 定义 列表 中 定义 了 一 个 术语 
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续 表 
语 法 常用 属性 说 ”有明 
<DD> 通用 属性 结束 标记 可 以 省 略 ， 但 使 用 样式 表 时 应 使 用 结束 标记 。DD 元 
<DD> 素 在 定义 列表 中 为 一 个 术语 提供 定义 数据 


DIR 元 素 定义 了 一 个 目录 列表 ， 其 中 包含 一 个 或 多 个 定义 实际 
列表 项 的 LI 元 素 。 此 时 LI 元 素 中 不 可 包含 块 级 元 素 。 在 
HTML 4.0 中 ，DIR 元 素 已 被 UL 元 素 取代 


<DIR> COMPACT (紧凑 显示 ) 
</DIR> ”| 通用 属性 


MENU 元 素 定义 了 一 个 菜单 列表 ， 其 中 包含 一 个 或 多 个 LI 元 
素来 定义 实际 菜单 项 。 此 时 LI 元 素 中 不 应 包含 块 级 元 素 。 
MENU 元 素 在 HTML 4.0 中 属 过 时 的 用 法 


<MENU> |COMPACT (紧凑 显示 ) 
</MENU> | 通用 属性 


附 1.6 表格 元 素 


表格 元 素 及 说 明 如 附 表 1.6 所 示 。 
附 表 1.6 表格 元 素 及 说 明 


语 法 常用 属性 
SUMMARY=Text (表格 说 明 ) 

WIDTH=Length ( 表 宽 ) 

BORDER=Pixels (边框 宽度 ) 

FRAME=[void | above | below | hsides | lhs | rhs | 
vsides | box | border]〔 外 边框 ) 

RULES=[none | groups | rows | cols | all] (表格 框 线 ) 
CELLSPACING=Length (单元 格 间 距 ) 
CELLPADDING=Length (单元 格 填 充 距 ) 
ALIGN=[left | center | right] (表格 对 齐 ) 
BGCOLOR=Color (表格 背景 色 ) 

通用 属性 


TABLE 元 素 用 于 定义 表格 ， 所 有 表格 中 的 内 容 
都 应 包含 在 <TABLE> 和 </TABLE> 中 


<TABLE> 
</TABLE> 


CAPTION 元 素 定 义 了 表格 的 标题 ， 使 用 时 
CAPTION 标记 符 必须 放 在 表格 最 开头 ( 即 
<TABLE> 之 后 ) 


<CAPTION> ”|ALIGN=[top | bottom | left | right] (对 齐 方 式 ) 
</CAPTION> ”| 通用 属性 


ALIGN=[ left | center | right | justify | char] (组 中 单元 
格 的 水 平 对 齐 方式 ) THEAD 元 素 定义 了 表格 的 表 头 ， 一 个 表格 中 最 
CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 多 可 含有 一 个 THEAD 标记 符 。 使 用 时 , THEAD 
CHAROFF=Length (对 齐 字 符 的 偏 移 量 ) 标记 符 必须 跟 在 <CAPTION> 、<COL> 或 
VALIGN=[top | middle | bottom | baseline] (组 中 单元 |<COLGROUP> 后 ， 在 <IFOOT> 和 <TBODY> 之 
格 的 垂直 对 齐 方式 ) 前 。 目 前 多 数 浏览 器 还 不 支持 THEAD 标记 符 

通用 属性 


ss na gt 


续 表 


常用 属性 说 明 


<TBODY> 
</TBODY> 


<COLGROUP> 
</COLGROUP> 


<COL> 


ALIGN=[left | center | right | justify | char] (组 中 单元 
格 的 水 平 对 齐 方式 ) 

CHAR=Character (单元 格 之 间 的 对 齐 字符 
CHAROFF=Length (对齐 字符 的 偏 移 量 ) 
VALIGN=[top | middle | bottom | baseline] (组 中 单元 
格 的 垂直 对 齐 方式 ) 

通用 属性 

ALIGN=[left| center | right | justify | char] (组 中 单元 
格 的 水 平 对 齐 方式 ) 


TFOOT 元 素 定义 了 表格 的 脚注 行 ， 一 个 表格 中 
最 多 可 含有 一 个 TFOOT 标记 符 。 TFOOT 标记 符 
必须 跟 在 THEAD 后 ， 在 TBODY 之 前 。 目 前 多 
数 浏览 器 还 不 支持 TFOOT 标记 符 


TBODY 在 表格 中 定义 了 一 组 数据 行 ， 表 格 中 至 
CHAR=Character (单元 格 之 间 的 对 齐 字 符 ) 少 有 一 个 TBODY 标记 符 。TBODY 必须 跟 在 可 
CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 选 的 TFOOT 后 。 如 果 表格 中 仅 有 一 个 TBODY， 
VALIGN=[top | middle | bottom | baseline] (组 中 单元 | 且 不 含 THEAD 和 TFOOT, 则 TBODY 的 起 始 和 
格 的 垂直 对 齐 方式 ) 结尾 标记 可 省 略 

通用 属性 

SPAN=Number (组 的 列 数 ) 

WIDTH=MultiLength (每 列 宽度 ) 

ALIGN=[ left | center | right | justify | char] (组 中 单元 
格 的 水 平 对 齐 方式 ) 

CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 
CHAROFF=Length (对齐 字 符 的 偏 移 量 ) 
VALIGN=[ top | middle | bottom | baseline] (组 中 单 
元 格 的 垂直 对 齐 方式 ) 

通用 属性 

SPAN=Number ( 列 数 ) 

WIDTH=MultiLength 〈 列 宽度 ) COL 元 素 定 义 了 一 个 表格 列 的 属性 。 如 果 使 用 此 
ALIGN=[ left | center | right | justify | char] ( 列 单元 格 | 元 素 ， 则 必须 放 在 可 选 的 CAPTION 元 素 之 后 ， 
的 水 平 对 齐 方式 ) 且 在 可 选 的 THEAD 元 素 之 前 。 与 COLGROUP 
CHAR=Character (单元 格 之 间 的 对 齐 字 符 ) 不 同 ,COL 并 不 在 结构 上 将 表格 列 分 组 , 而 是 仅 
CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 仅 定义 若干 表格 列 所 共享 的 属性 . COL 标记 符 也 
VALIGN=[ top | middle | bottom | baseline] 〈 列 单元 | 可 以 位 于 COLGROUP 标记 符 之 中 ， 此 时 COL 
格 的 垂直 对 齐 方式 ) 的 属性 将 覆盖 COLGROUP 的 属性 

通用 属性 


COLGROUP 元 素 定义 了 一 个 表格 中 的 列 组 。 使 
用 列 组 时 ，COLGROUP 元 素 必须 放 在 可 选 的 
CAPTION 元 素 之 后 ， 且 在 可 选 的 THEAD 元 素 
之 前 


ALIGN=[ left | center | right | justify | char] (组 中 单元 
格 的 水 平 对 齐 方式 ) 

CHAR=Character (单元 格 之 间 的 对 齐 字符 ) TR 元 素 定义 了 一 个 表格 行 。TR 必须 出 现在 由 
CHAROFF=Length (对 齐 字 符 的 偏 移 量 ) THEAD、TFOOT 或 TBODY 所 定义 的 行 组 中 。 
VALIGN=[ top | middle | bottom | baseline] (组 中 单 |TR 标记 符 包 含 <TH> 和 <TD> 标 记 符 ，<TH> 和 
元 格 的 垂直 对 齐 方式 ) <TD> 标 记 符 中 又 包含 了 表格 的 实际 数据 
BGCOLOR=Color (背景 色 ) 


通用 属性 
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续 表 
常用 属性 


TH> 


ROWSPAN=Number (单元 格 所 占 的 行 数 ) 
COLSPAN=Number (单元 格 所 占 的 列 数 ) 
HEADERS=IDREFS (当前 单元 格 的 标题 单元 格 
列表 ) 

ABBR=Text (标题 单元 格 的 缩 略 形式 ) 

SCOPE [ row | col | rowgroup | colgroup] (标题 单元 
格 所 覆盖 的 单元 格 数 ) 

AXIS=CDATA〈 标 题 单元 格 类 别 》 
ALIGN=[left | center | right | justify | char] (单元 格 的 |TH 元 素 定义 了 表格 中 的 一 个 标题 单元 格 ， 其 中 
水 平 对 齐 方式 ) 的 内 容 通常 以 黑体 显示 。TH 标记 符 位 于 TR 标记 
CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 符 内 

CHAROFF=Length (对 齐 字符 的 偏 移 量 ) 
VALIGN=[ top | middle | bottom | baseline] (单元 格 
的 垂直 对 齐 方 式 ) 

WIDTH=Pixels (单元 格 宽 ) 

HEIGHT=Pixels (单元 格 高 ) 

NOWRAP (单元 格 内 不 换行 ) 

BGCOLOR=Color (单元 格 背景 色 ) 

通用 属性 

ROWSPAN=Number (单元 格 所 占 的 行 数 ) 
COLSPAN=Number (单元 格 所 占 的 列 数 》 
HEADERS=IDREFS (当前 单元 格 的 标题 单元 格 
列表 ) 

ABBR=Text 标题 单元 格 的 缩 略 形式 ) 
SCOPE[row | col | rowgroup | colgroup]〔 标 题 单元 格 
所 覆盖 的 单元 格 数 ) 

AXIS=CDATA (标题 单元 格 类 别 7 

ALIGN=[left | center | right | justify | char] (单元 格 的 
水 平 对 齐 方式 ) 

CHAR=Character (单元 格 之 间 的 对 齐 字符 ) 
CHAROFF=Length〔 对 齐 字 符 的 偏 移 量 ) 
VALIGN=[top | middle | bottom | baseline] (单元 格 的 
垂直 对 齐 方式 ) 

WIDTH=Pixels (单元 格 宽 ) 

HEIGHT=Pixels (单元 格 高 ) 

NOWRAP (单元 格 内 不 换行 ) 

BGCOLOR=Color (单元 格 背景 色 ) 

通用 属性 


TD 元 素 定义 了 表格 中 的 一 个 数据 单元 格 。TD 标 
记 符 位 于 TR 标记 符 内 


附 1.7 框架 元 素 


框架 元 素 及 其 说 明 如 附 表 1.7 所 示 。 
附 表 1.7 ”框架 元 素 及 说 明 


语 法 常用 属性 说 了 明 


FRAMESET 元 素 是 一 个 框架 容器 ， 它 将 窗 
口 分 成 长 方形 的 子 区 域 ,， 即 框架 。 在 一 个 框 
架 集 文档 中 ，<FRAMESET> 标 记 符 取 代 了 
<BODY> 的 位 置 ,而 紧 接 <HEAD> 标 记 符 之 
后 。FRAMESET 标记 符 中 包含 一 个 或 多 个 
<FRAMESET> 或 < 了 FRAME> 标 记 符 , 并 可 能 
含有 一 个 可 选 的 <NOFRAMES> 标 记 符 


ROWS=MultiLengths (设置 横向 框架 ) 
COLS=MultiLengths 设置 纵 向 框架 ) 
ONLOAD=Script( 所 有 框架 载 入 时 启动 脚本 的 事件 ) 
ONUNLOAD=Script( 所 有 框架 卸载 时 启动 脚本 的 事件 ) 
通用 属性 


NAME=CDATA (框架 名 ) 

SRC=URL (框架 的 初始 页 面 ) 

LONGDESC=URL (框架 的 长 篇 描述 ) 
FRAMEBORDER=[1 |0] (设置 是 否 显示 框架 边框 ) 
<FRAME> MARGINWIDTH=Pixels( 边 距 宽度 ) 
MARGINHEIGHT=Pixels( 边 距 高 度 ) 

NORESIZE (禁止 修改 框架 尺寸 ) 

SCROLLING=[yes | no | auto] (设置 是 否 显示 滚动 条 ) 


FRAME 元 素 定义 了 一 个 框架 ， 即 一 个 框架 
集 文档 (FRAMESET) 中 的 长 方形 空间 。 
FRAME 标记 符 必须 包含 在 FRAMESET 标 
记 符 中 


通用 属性 
NOFRAMES 元 素 中 包含 了 框架 不 能 被 显示 
时 的 替换 内 容 。NOFRAMES 元 素 通常 在 
ANOFRAMES> | Frameset 文档 中 使 用 , 它 在 浏览 器 不 支持 杠 
<INOFRAMES> | 通用 属性 架 或 框架 被 禁用 时 提供 相应 的 替换 内 容 。 


NOFRAMES 标记 符 必 须 位 于 FRAMESET 
标记 符 之 间 

SRC=URL (框架 内 容 网 页 的 URL) 

NAME=CDATA (框架 名 ) 

LONGDESC=URL (到 长 篇 描述 的 链接 ) 
WIDTH=Length (框架 宽度 ) 

HEIGHT=Length (框架 高 度 ) 

<IFRAME> ALIGN=[top | middle | bottom | left | right] (框架 对 齐 方 
</FRAME> 式 ) 

FRAMEBORDER=[1|0] (设置 是 否 显示 框架 边框 ) 
MARGINWIDTH=Pixels ( 边 距 宽 ) 
MARGINHEIGHT=Pixels 〈 边 距 高 ) 

SCROLLING=[yes | no | auto] (是 否 显示 滚动 条 ) 

通用 属性 


IFRAME 元 素 定义 了 一 个 页 内 框架 , 可 以 在 
其 中 显示 HTML 页 面 。 包 含 在 <IFRAME> 
和 </IFRAME> 中 的 内 容 只 有 当 浏览 器 不 支 
持 框架 时 才 显 示 
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附 1.8 表单 元 素 


表单 元 素 及 其 说 明 如 附 表 1.8 所 示 。 
附 表 1.8 ”表单 元 素 及 说 明 

语 法 常用 属性 
ACTION=URL (处 理 表单 结果 的 脚本 的 位 置 ) 
METHOD=[get | post] (发 送 表 单 的 HITP 方法 ) 
ENCTYPE=ContentType (表单 数据 的 编码 类 型 ) 
<FORM> ACCECT-CHARSET=Charsets 〈 可 支持 的 字符 列表 ) 
</FORM> TARGET=FrameTarget (显示 表单 内 容 的 框架 ) 
ONSUBMIT=Script (表单 发 送 时 启动 脚本 的 事件 ) 
ONRESET=Script (表单 重 置 时 启动 脚本 的 事件 7 
通用 属性 
TYPE=[text | password | checkbox | radio | submit | reset | file | 
hidden | image | button] (控件 类 型 ) 
NAME=CDATA (控件 的 名 称 ) 
VALUE=CDATA (控件 的 值 ) 
CHECKED (设置 单 选 框 或 复 选 框 的 初始 选中 状态 ) 
SIZE=CDATA (文本 框 的 宽度 ， 以 字符 数 为 单位 ) 
MAXLENGTH=Number (最 大 文本 输入 字符 数 ) 
SRC=URL (图 像 源 ) 
ALT=CDATA (图 像 的 替换 文本 
USEMAP=URL (客户 端 图 像 映射 7 
ALIGN=[top | middle | bottom | left | right] (表单 元 素 的 对 齐 
<INPUT> 方式 ) 
DISABLED 使 控件 无 效 以 防止 输入 ) 
READONLY (设置 控件 为 只 读 ) 
ACCEPT=ContentTypes〈 文 件 上 载 的 媒体 类 型 ) 
ACCESSKEY=Character (快捷 键 ) 
TABINDEX=Number (在 Tab 键 遍 历次 序 中 的 位 置 ) 
ONFOCUS=Script〈 当 元 素 获 得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script( 当 元 素 失 去 焦点 时 启动 脚本 的 事件 ) 
ONSELECT=Script ( 当 文 本 框 中 的 部 分 文本 被 选中 时 启动 脚 
本 的 事件 ) 
ONCHANGE=Script ( 当 控 件 的 值 改 动 时 启动 脚本 的 事件 ) 
通用 属性 


FORM 元 素 定义 了 一 个 交互 式 表单 。 该 元 
素 中 包含 INPUT、 SELECT、 TEXTAREA 
和 BUTTON 等 控件 ， 使 用 户 能 通过 控件 
与 表单 传递 信息 


INPUT 元 素 定 义 了 一 个 用 于 用 户 输入 的 
表单 控件 ， 通 常 位 于 FORM 标记 符 内 


ss Raa 


续 表 


语 法 常用 属性 说 明 
NAME=CDATA (控件 的 名 称 ) 
VALUE=CDATA (控件 的 值 ) 
TYPE=[submit | reset | button] (按钮 类 型 ) 
DISABLED 使 控件 无 效 ) BUTTON 元 素 定义 了 一 个 按钮 ， 可 以 是 
<BUTTON> ”|READONLY (设置 控件 为 只 读 ) 提交 、 重 置 或 普通 按钮 。 虽 然 也 可 以 用 
</BUTTON> ”|ACCESSKEY=Character (快捷 键 ) INPUT 元 素 创建 按钮 但 用 BUTTON 元 
TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 素 创建 的 按钮 通常 具有 更 强 的 表现 力 
ONFOCUS=Script〈 当 元 素 获 得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script〈 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 
通用 属性 
NAME=CDATA (控件 的 名 称 ) 
MOULTIPLE (控制 是 否 可 以 选择 多 个 选项 ) 
SIZE=Number (显示 出 的 菜单 框 行 数 ) 
A DISABLED (使 控件 无 效 ) SELECT 元 素 定义 了 一 个 选项 菜单 , 其 中 
TABINDEX=Number (在 Tab 键 遍历 次 序 中 的 位 置 ) 包含 若干 个 OPTGROUP 或 OPTION 元 素 
“SELECT> 。 |oNFocUs=script ( 当 元 素 获得 焦点 时 启动 脚本 的 事件 ) ”| 来 为 用 户 提供 选项 
ONBLUR=Script〈 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 
ONCHANGE=Script( 当 控件 的 值 改动 时 启动 脚本 的 事件 ) 
通用 属性 
OPTGROUP 元 素 定义 了 一 个 SELECT 菜 
号 单 内 的 选项 组 ， 其 中 至 少 包含 一 个 
<OPTGROUP> 和 we OPTION 元 素来 定义 实际 的 选项 。 注 意 多 
</OPTGROUP> |、 数 浏览 器 并 不 支持 OPTGROUP 元 素 ， 
这 间 遇 作 此 在 使 用 选项 菜单 时 最 好 直接 用 
[OPTION 定义 选项 
VALUE=CDATA (选项 值 ) 
<OPTION> 本 tbine OPTION 元 素 定义 了 SELECT 菜单 中 的 
-OpTION [D'SABLED 《禁用 选项 ) 菜单 选项 
LABEL=Text (选项 标签 7 
通用 属性 
NAME=CDATA (控件 的 名 称 ) 
ROWS=Number (多 行文 本 框 的 行 数 ) 
COLS=Number (多 行文 本 框 的 列 数 ) 
DISABLED (使 控件 无 效 ) 
READONLY 设置 控件 为 只 读 ) 
ACCESSKEY=Character (快捷 键 ) a i 
EXTAREA> | TABINDEX-Number (在 Tab 刍 沁 历次 序 中 的 位 置 hw TT 
TEXTAREA> [ONFOCUS=Script( 当 元 素 获得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script ( 当 元 素 失去 焦点 时 启动 脚本 的 事件 ) 
ONSELECT=Script ( 当 文本 框 中 的 某 些 文本 被 选中 时 启动 脚 
本 的 事件 ) 
ONCHANGE=Script( 当 控件 的 值 改 动 时 启动 脚本 的 事件 ) 
通用 属性 
PROMPT (提示 信息 ) ISINDEX 元 素 定义 了 一 个 单行 文本 输入 框 。 
“SINDEX> | 通用 属性 在 HTML 4.0 中 ， 它 已 被 INPUT 元素 取代 


附录 1 HTML 4.0 快速 和 


续 表 
语 法 常用 属性 说 明 
FOR=IDREF (相关 表单 控件 的 ID) 
ACCESSKEY=Character (快捷 键 ) 到 Es 
5ABEE> |oNFoCos-scapr (元 素 获得 焦点 时 启动 脚本 的 事件 ) |- 天 这 和 “天生 人 和 全 
ONBLUR=Script (元 素 失 去 焦点 时 启动 脚本 的 事件 ) 
通用 属性 
FIELDSET 元 素 定义 了 一 个 表单 控件 组 。 
通过 将 相关 联 的 控件 分 组 , 可 以 把 表单 分 
为 更 小 、 更 易于 管理 的 部 分 ， 以 避免 出 现 
<FIELDSET> |、 用 户 无 法 使 用 过 于 繁多 的 控件 的 情况 ( 注 
</FIELDSET> i 意 并 非 所 有 浏览 器 都 支持 FIELDSET 元 
素 ) 。 在 FIELDSET 标记 符 中 应 包含 作为 
控件 组 成 员 的 各 表单 控件 ， 并 需要 使 用 
LEGEND 标记 符 创建 一 个 控件 组 标签 
ACCESSKEY=Character (快捷 键 ) LEGEND 元 素 定义 了 一 个 控件 组 的 标签 ， 
<LEGEND> ALIGN=[top | bottom | left | right] (标签 文字 相对 于 控件 组 的 | 且 必 须 立 即 出 现在 <FIELDSET> 标 记 符 
</LEGEND> ”| 对 齐 方 式 ) 之 后 。 有 关 LEGEND 标记 符 的 使 用 方法 ， 
通用 属性 请 参见 14.8.10 节 中 对 FIELDSET 的 说 明 


附 1.9 其 他 元 素 


其 他 元 素 及 说 明 如 附 表 1.9 所 示 。 


<A> 
</A> 


附 表 1.9 其 他 元 素 及 说 明 


常用 属性 
HREF=URL (链接 的 目标 文件 位 置 ) 
NAME=CDATA (已 命名 的 链接 目标 ) 
REL=LinkTypes (到 链接 的 关系 ) 
REV=LinkTypes 来自 链 接 的 关系 ) 
TYPE=ContentType〈 链 接 的 内 容 类 型 ) 
TARGET=FrameTarget (显示 链接 的 目标 框架 ) 
HREFLANG=LanguageCode (链接 目标 文件 的 语言 ) 
CHARSET=Charset 链接 的 字符 编码 ) 
ACCESSKEY=Charater 快捷 键 ) 
TABINDEX=Number (Tab 键 遍历 次 序 中 的 位 置 ) 
SHAPE=[rect | circle | poly | default] (客户 端 图 像 映射 中 映射 
区 域 的 形状 
COORDS=Coords (客户 端 图 像 映 射 中 映射 区 域 的 坐标 ? 
ONFOCUS=Script (元 素 获得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script (元 素 失去 焦点 时 启动 脚本 的 事件 ) 
通用 属性 


人 元素 定义 了 一 个 超 链接 〈 使 用 href 属性 
时 ) 或 者 一 个 超 链接 的 目的 位 置 〈 使 用 
name 属性 时 ) 。 当 定 义 超 链接 时 , 位 于 <A> 
和 </A> 之 间 的 内 容 成 为 超 链接 的 源 ， 浏 览 
者 可 以 单 击 超 链接 源 跳 转 到 超 链接 目标 


AL+CSS 网 页 设计 详解 


续 表 
语 法 常用 属性 说 明 
CODE=CDATA (类 文件 名 称 或 路 径 ) 
CODEBASE=URL (类 文件 的 基础 URL) 
WIDTH=Length (小 程序 在 网 页 中 所 占 的 宽度 ) 
HEIGHT=Length 〈 小 程序 在 网 页 中 所 占 的 高 度 ) 
ARCHIVE=URL-LIST (存档 文件 所 在 的 位 置 列表 ) APPLET 元 素 用 来 嵌入 一 个 Java 小 程序 
_AppLET |OBJECT-CDATA (序列 化 的 小 程序 》 CAppleD 。 在 HIML 4.0 Hs. 建议 使 用 
JJAPPIET> |NAME-CDATA (小 程序 实例 的 名 称 ， 用 于 小 程序 间 通 信 ) |OBJECT 元 素 代 蔡 APPLET 元 素 。 使 用 
ALT=Text (替换 文本 ) APPLET 标记 符 时 ， 可 以 用 PARAM 标记 
ALIGN=[top | middle | bottom | left | right] (小 程序 在 页 面 的 对 | 符 指 定 运行 时 参数 
齐 方式 ) 
HSPACE=Pixels〈 小 程序 对 象 左右 的 空白 距离 ) 
VSPACE=Pixels〈 小 程序 对 象 上 下 的 空白 距离 ) 
通用 属性 
SHAPE=[rect | circle | poly | default] (客户 端 图 像 映射 中 映射 
区 域 的 形状 7 
COORDS=Coords (客户 端 图 像 映射 中 映射 区 域 的 坐标 ? 
HREF=URL (链接 的 目标 文件 位 置 ) 
TARGET=FrameTarget (显示 链接 的 目标 框架 ) AREA 元 素 定义 了 一 个 在 客户 端 图 像 映射 
<AREA> NOHREF (不 包含 链接 ) 中 的 图 形 区 域 。AREA 标记 符 位 于 MAP 
ALT=Text (替换 文本 ) 标记 符 内 
TABINDEX=Number (Tab 键 遍历 次 序 中 的 位 置 ) 
ONFOCUS=Script〔 元 素 获得 焦点 时 启动 脚本 的 事件 ) 
ONBLUR=Script (元素 失 去 焦点 时 启动 脚本 的 事件 ) 
通用 属性 
BASE 元 素 定义 了 文档 的 默认 URL 基准 和 
HREF=URL (默认 URL 基准 ) 默认 目标 框架 。 一 个 文档 中 最 多 有 一 个 
“BASE> |TARGEF=FrameTarget (默认 目标 框架 ) BASE 标记 符 ， 而 且 如 果 使 用 则 必须 位 于 
HEAD 标记 符 内 
本 DIR=[ltr |rt] (文本 的 方向 ) BDO 元 素 路 益 了 所 包含 文本 的 双向 算法 。 
DO LANG=LanguageCode (文本 的 语言 ) BDO 元 素 用 于 设置 多 语言 文本 的 显示 方 
通用 属性 向 ， 在 一 般 的 网 页 中 并 不 常用 
CENTER 元 素 定义 了 一 个 居中 对 齐 的 块 。 
<CENTER> | 通用 属性 在 HTML 4.0 中 ， 它 属 过 时 的 用 法 ， 通 党 
NCPR 用 <DIV align=center></DIV> 代 壹 
SRC=URL (图 像 源 的 位 置 ) 
ALT=Text (替换 文本 ) 
LONGDESC=URL (包含 长 篇 描述 的 文档 位 置 ) 
WIDTH=Length (图 像 宽度 ) 
HEIGHT=Length (图 像 高 度 ) 
USEMAP=URL (客户 端 图 像 映射 的 映射 说 明 ， 对 应 于 MAP 
<IMG> 元 素 指定 的 内 容 ) IMG 元 素 定 义 了 一 个 行内 图 像 


ISMAP (指示 使 用 服务 器 端 图 像 映射 7 

ALIGN=top | middle | bottom | left | right 〈 图 像 对 齐 方式 ) 
BORDER=Length (图 像 边框 的 宽度 ) 

HSPACE=Pixels (图 像 左右 的 空白 距离 ) 
VSPACE=Pixels 图像 上 下 的 空白 距离 ) 

通用 属性 
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续 表 
语 法 常用 属性 说 有明 
REL=LinkTypes〈 到 链接 的 关系 ) 
REV=LinkTypes (来 自 链接 的 关系 ) 
HREF=URL (链接 资源 的 URL) 
TYPE=ContentType〔 链 接 的 内 容 类 型 ) LINK 元 素 定义 了 文档 的 关联 关系 。LINK 
<LINK> TARGET=FrameTarget (显示 链接 的 目标 框架 ) 标记 符 应 包含 在 HEAD 标记 符 内 ， 并 且 可 
MEDIA=MediaDesc 链接 的 媒体 ) 以 有 多 个 
HREFLANG=LanguageCode (链接 资源 的 语言 ) 
CHARSET=Charset (链接 资源 的 字符 编码 ) 
通用 属性 
MAP 元 素 用 于 定义 图 像 映 射 的 区 域 信 息 。 
<MAP> |NaME-CpATA (图 你 映 的 名 称 ) ne 
人 的 值 .MAP 标记 符 内 包含 多 个 AREA 标记 
符 ， 用 于 定义 图 像 上 可 单 击 的 区 域 
NOSCRIPT 元 素 为 不 执行 客户 端 程序 的 
浏览 器 提供 了 替代 的 显示 内 容 。 
<NOSCRIPT> |、 NOSCRIPT 标记 符 应 紧 跟 在 它 所 提供 替换 
</NOSCRIPT> 站 性 内 容 的 SCRIPT 标记 符 后 。 只 有 当 浏 览 器 
不 支持 客户 端 程序 时 ， 才 显示 
<NOSCRIPT> </NOSCRIPT> 中 的 内 容 
1 OBJECT 元 素 在 网 页 中 定义 了 一 个 对 象 。 
ARCHIVE-CDATA (存档 文件 》 这 个 对 象 可 以 是 图 像 、Java 小 程序 、 
CODEBASE=URL (CLASSID、DATA、ARCHIVE 的 基准 站 
oa 际 记 符 为 对 得 定 直行 时 参数 ,在 
9 El 运 休 有 o 
eee HTML 4.0 中 ， 建 议 用 通用 的 OBJECT 元 
NAME=CDATA (如 果 对 象 在 表单 中 提交 ， 则 定义 其 名 称 ) pt 
USEMAP=UAL (定义 使 用 的 客户 端 图 像 映射 》 
<OBJECT> TYPE-ContentType (对 象 内 容 类 型 ) 素 (如 IMG、APPLET 等 ) 的 用 法 目前 还 
</OBJECT> 没有 得 到 多 数 浏览 器 的 支持 。 


CODETYPE=ContentType (代码 内 容 类 型 ) 
STANDBY=Text (装载 时 显示 的 信息 ) 


TABINDEX=NUMBER (Tab 键 遍历 顺序 中 的 位 置 ) 


DECLARE 《声明 一 个 对 象 而 不 启动 它 》 


ALIGN=[top | middle | bottom | left | right] (对 象 对 齐 方式 ) 


BORDER=Length (对 象 边框 宽度 ) 
HSPACE=Pixels (对 象 左右 的 空白 距离 ) 
VSPACE=Pixels (对象 上 下 的 空白 距离 ) 
通用 属 件 


为 确保 浏览 器 的 支持 ， 通 常 使 用 嵌 套 的 
OBJECT 元 素 包含 多 个 对 象 ， 以 便当 浏览 
器 无 法 显示 外 层 对 象 时 ， 依 次 尝试 显示 内 
层 对 象 。 

如 果 浏 览 器 无 法 显示 Python 小 程序 ， 则 尝 
试 显示 MPEG 视频 ， 如 果 仍 然 无 法 显示 
MPEG 视频 ， 则 尝试 显示 GIF 图 像 ， 如 果 
仍然 无 法 显示 GIF 图 像 ， 则 显示 文本 
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续 表 


常用 属性 说 明 


<PARAM> 


PARAM 元 素 指定 了 对 象 在 运行 时 需要 的 
一 系列 值 。 在 OBJECT 或 APPLET 标记 
符 中 可 以 以 任意 顺序 包含 任意 数量 的 
PARAM 标记 符 。 在 使 用 PARAM 指定 参 
数 时 ， 对 象 必须 能 识别 所 指定 的 参数 名 
和 值 


NAME=CDATA (参数 名 称 ) 

VALUE=CDATA (参数 值 ) 

VALUETYPE=[data | ref | objectl 〈 值 的 类 型 ) 
TYPE=ContentType ( 当 valuetype=ref 时 指定 值 的 内 容 类 型 ) 
ID=ID (元 素 的 ID) 


<SCRIPT> 
</SCRIPT> 


<STYLE> 
</STYLE> 


TYPE=ContentType〈 编 程 语言 的 内 容 类 型 ) 
LANGUAGE=CDATA (编程 语言 名 ) 
SRC=URL (外 部 程序 位 置 ) 
CHARSET=Charset〔 外 部 程序 的 字符 编码 ) 
DEFER〈 设 置 此 布尔 属性 时 ， 表 示 告 知 浏览 器 脚本 并 不 产生 | 查 用 户 填写 的 内 容 ， 并 立即 通知 用 户 填写 
任何 文档 内 容 (例如 ,在 JavaScript 中 没有 “document,write?| 错 误 。SCRIPT 标记 符 可 以 位 于 文档 中 的 任 
语句 )， 从 而 使 浏览 器 可 以 继续 解释 HTML 文件 的 内 容 并 进 | 何 位 置 ， 但 通常 位 于 HEAD 标记 符 内 ， 以 
行 显示 ) 便于 维护 

STYLE 元 素 用 于 在 文档 中 嵌入 样式 表 。 文 
档 的 HEAD 标记 符 中 可 以 包含 任意 数量 的 
STYLE 标记 符 。 对 于 层 且 样式 表 (CSS) ， 
TYPE 属性 的 值 是 text/css。 定 义 样式 表 
时 , 样式 表 项 的 形式 为 : Selector {property1 
:valuel; property2:value2; .…}, 其 中 Selector 
可 以 是 HTML 标记 、 样式 类 、 样 式 ID 等 ; 
property 是 由 CSS 定义 的 属性 ， 值 是 属性 


SCRIPT 元 素 在 文档 中 包含 一 段 客户 端 肢 
本 程序 。 客 户 端 脚本 程序 能 使 文档 更 好 地 


TYPE=ContentType (样式 语言 的 类 型 ) 
MEDIA=MediaDesc 〈 应 用 样式 的 媒体 ) 
TITLE=Text (样式 表 的 名 字 ) 


对 应 的 值 


附录 2 CSs 中 支持 的 颜色 名 称 


在 本 书 中 设置 颜色 时 提 到 过 ， 可 以 使 用 颜色 的 英文 名 称 来 设置 颜色 效果 。 本 附录 给 出 在 CSS 中 可 
以 使 用 的 颜色 名 称 、 颜 色 代码 以 及 颜色 的 效果 。 


1. W3C 规定 的 十 六 色 


W3C 就 是 World Wide Web Consortium， 全 球 万 维 网 联盟 的 简称 。 它 研究 Web 规范 和 指导 方针 ， 
致力 于 推动 Web 发 展 ， 保 证 各 种 Web 技术 能 很 好 地 协同 工作 。W3C 规定 的 十 六 色 如 附 表 2.1 所 示 。 
附 表 2.1 W3C 规定 的 十 六 色 

十 六 进 制 颜色 码 ” | 十 进 制 RGB 颜色 值 颜色 效果 

#000000 0.0.0 

# FFFFFF 255,255,255 
255.0.0 
255.255.0 
0.255.0 


颜色 的 英文 名 称 
black 
White 


中 文 含义 


Ted 
#FFFFO00 
FF 


yellow 
lime 
aqua 
blue 
fuchsia 
gray 
silver 


#0000FF 
#fFOOFF 
#808080 


#COCOCO 192.192.192 


EE 
i 


maroon #800000 128.0.0 

olive #808000 128.128.0 

green #008000 0.128.0 

teal #008080 0.128.128 

navy, #000080 0.0.128 

purple #800080 128.0.128 
2. 网 络 安全 色 


Web 颜色 只 有 216 色 ， 所 以 网 络 上 安全 色 就 是 指 Web 所 能 反映 和 支持 的 216 色 。 这 里 给 出 该 表 是 
为 了 让 读者 更 清楚 网 络 中 可 以 正常 显示 的 颜色 ， 从 而 在 创建 网 页 的 时 候选 择 更 加 合适 的 色彩 。 

网 络 安全 色 的 十 六 进 制 颜色 码 都 是 可 以 被 33 整除 的 值 ， 例 如 ， 妆 30066、#CC0099 等 。 网 络 安全 
色 如 附 表 2.2 所 示 。 
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附 表 2.2 ”网 络 安全 色 


十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 | 颜色 效果 
#000000 0.0.0 | | #990000 153.0.0 | | 
#000033 0.0.51 | | 0003; 153.0.51 dl 
#000066 0.0.102 | | #0%0066 153.0.102 Ee 下 
#000099 0.0.153 | i | ,oo 153.0.153 | | 
#0000CC 0.0.204 | WW | #00cc 153.0.204 [ed 
#0000FF 0.0.255 | i | #00rr 153.0.255 | | 
#003300 0.51.0 | EW | #0 153.51.0 | 
#003333 0.51.51 | EW | #00333; 153.51.51 EE 
#003366 0.51.102 | WW | #6 153.51.102 | | 
#003399 0.51.153 -| #993399 153.51.153 FE 
#0033CC 0.51.204 #9933CC 153.51.204 
#0033FF 0.51.255 | | 面 153.51.255 
#006600 0.102.0 | | 国 153.102.0 
#006633 0.102.51 | | 国 153.102.51 
#006666 0.102.102 | 面 153.102.102 [El 
#006699 0.102.153 | | 国 153.102.153 
#0066CC 0.102.204 | | 图 153.102.204 
#0066FF 0.102.255 | | | | 153.102.255 
#009900 0.153.0 | | 图 153.153.0 
#009933 0.153.51 | | | | #999933 | 153.15351 
#009966 0.153.102 | | 圆 153.153.102 
#009999 0.153.153 | | | | #999999 | 153.153.153 [ 

#0099CC 0.153.204 #9999CC 153.153.204 [E 
#0099FF 0.153.255 [ #9999FF 153.153.255 L | 
#00CC00 0.204.0 #99CCO0 1532040 | [ES 
#00CC33 0.204.51 #99CC33 153.204.51 世纪 
#00CC66 0.204.102 | | | | #99cce6 153.204.102 [| 
#00CC99 0.204.153 | | | ,oocco 153.204.153 

#00CCCC 0.204.204 | | | ,oocccc 153.204.204 [| 
#00CCFF 0.204.255 | 国 | ,ooccrr 153.204.255 [el 
#00FF00 0.255.0 | | | ,oorro 153.255.0 [El 
#00FF33 0.255.51 | | | ,oorr 153.255.51 | 
#00FF66 0.255.102 | | | ,oorrec 153.255.102 EE | 
#00FF99 0.255.153 | 是 | ,oorro 153.255.153 
#00FFCC 0.255.204 | | ,ooFrrcc 153.255.204 [El 
#00FFFF 0.255.255 | 革 | | oorrrr 153.255.255 [El 


全 
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十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 | 颜色 效果 
#330000 51.0.0 204.0.0 [| 
#330033 51.0.51 | 而 204.0.51 =| 
#330066 51.0.102 | a | 204.0.102 [| 
#330099 51.0.153 | 男 204.0.153 EE = 二 
择 300CC 51.0.204 | | | 204.0.204 
#3300FF 51.0.255 | | 204.0.255 | | 
#333300 51.51.0 | | ,ccsio 204.51.0 | 
#333333 51.51.51 | | ,cc | 2045151 | 
的 33366 51.51.102 | | | | accs366 | 20451102 
#33399 51.51.153 #CC3399 204511535 | 国 
#3333CC 51.51.204 #CC33CC 20451204 | 加 
#3333FF 51.51.255 #CC33FF 204.51.255 
#36600 51.102.0 | | 面 204.102.0 
#36633 51.102.51 | | 面 204.102.51 
#36666 sl10107 | | 国 204.102.102 
#336699 sl102153 | | 面 204.102.153 
#3366CC s1102204 | | | | 204.102.204 
#3366FF s1102255 | | | | 204.102.255 
#39900 51.153.0 | | | | 204.153.0 
#339933 51.153.51 | | | | cce33 | 20415351 
#39966 51L153.10 | | | | wawcco%66 | 204153.102 
#339999 s1153153 | | | | cee | 204.153.153 [ 
3399CC s1153204 | | | | 204.153.204 
#3399FF 51.153.255 一 #CC99FF 204.153.255 
33CC00 51.204.0 #CCCC00 204.204.0 
#33CC33 51.204.51 | | | | i#cccess 204.204.51 
#3CC66 s51204107 | 加 | i#cccces 204.204.102 
#3CC99 51204153 | 0 | ,cccco 204.204.153 
#3CCCC 51204204 | | | | #wcccccc 204.204.204 
#33CCFF 51204255 | EE | 204.204.255 
#3FF00 51.255.0 | | | ,ccrro 204.255.0 
#33FF33 51.255.51 | 面 204.255.51 
#3FF66 51255107 | By | 204.255.102 
#3FF99 51255153 “| | | 204.255.153 
妈 3FFCC 5l25524 | | | 204.255.204 
#33FFFF 51255255 | | | 204.255.255 
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续 表 

十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 | 颜 色 效 果 | 十 六 进 制 颜色 码 | 十 进 制 RGB 颜色 值 | 颜色 效果 

#660000 102.0.0 255.0.0 [| 

#660033 102.0.51 | CC | 255.0.51 | 

#660066 102.0.102 | i | ro 255.0.102 [| 

#660099 102.0.153 | 而 255.0.153 | | 

#6600CC 102.0.204 园 | 

#6600FF 102.0.255 | 国 | 

#663300 102.51.0 | i | i#rr;30 5, | 

#663333 102.51.51 | Wi | rr | 2555151 

#663366 10251102 | | ,rr | 25551102 

#663399 10251153 | BW | rr | 25551153 

#6633CC 10251204 | | 画 255.51.204 

#6633FF 10251255 | | 国 255.51.255 

#666600 102.102.0 | | 国 255.102.0 

#666633 10210751 | | 国 255.102.51 

#666666 1021021027 | | 面 255.102.102 

#666699 102102153 | | 面 255.102.153 

#6666CC 102102204 | | | | 255.102.204 

#6666FF 102102255 | | | | 255.102.255 

#669900 102.153.0 面 | 255.153.0 

#669933 10215351 | | | | rr9933 | 255.15351 

#669966 102.153.102 | | | | rr9966 | 255.153.102 

#669999 102153153 | | | | rr9999 | 255.153.153 

#6699CC 102153204 | | | 255.153.204 L 

#6699FF 10153255 | [EE | 255.153.255 [ 

#66CC00 1022040 | 人 | | wrrccoo 国 本 

#66CC33 10220451 | | | | FFccs3 We 

#66CC66 102204102 | 加 D2 | ,rrccck CC | 

#66CC99 102204153 ”| , | ,rrcco 255.204.153 可 

#66CCCC 102204204 | | | | Fcccc 255.204.204 

#66CCFF 10204255 | 一 | 255.204.255 [| 

#66FF00 102.255.0 | 国 | ,rrrro 255.255.0 [El 

#66FF33 10225551 ”| 是 | rrrrs 255.255.51 [| 

#66FF66 10225510 | 一 | 255.255.102 | 

#66FF99 102255153 | @ | | rrrro 255.255.153 

#66FFCC 102255204 | | | rrrrcc 255.255.204 [| 

#66FFFF 102255255 | | | i#rFFrFF 255.255.255 [| 


@ 
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3 预 命名 颜色 


在 现在 的 主流 的 浏览 器 中 有 一 些 颜 色 可 以 直接 采用 英文 名 称 来 设置 , 附 表 2.3 给 出 的 颜色 就 是 到 目 
前 为 止 ， 可 以 直接 通过 颜色 英文 名 称 设置 ， 并 能 在 下 4 以 上 版 本 的 浏览 器 中 正常 显示 的 颜色 。 


附 表 2.3 ” 预 命名 的 颜色 


颜色 的 英文 名 称 中 文 含 义 六 进 制 颜色 码 十 进 制 RGB 颜色 值 颜色 效果 
aliceblue #0OF8FF 240.248.255 [到 到 
antiquewhite 三 AEBD7 250.235.215 [EE 
aqua #00FFFF 0.255.255 CC |] 
aquamarine #7FFFD4 127.255.212 [| |] 
azure 诈 OFFFF 240.255.255 ES 
beige #5F5DC 245.245.220 | 
bisque 三 FE4C4 255.228.196 
black 0.0.0 
blanchedalmond 255,235,205 


blue 0.0.255 


blueviolet 138.43.226 
brown 165.42.42 
burlywood 222,184,135 
cadetblue 95.158.160 
chartreuse 127,255.0 
chocolate 210.105.30 
coral 255.127.80 
comflowerblue 100.149.237 


comsilk 255.248.220 Es 于 
crimson 220.20.60 

cyan #00FFFF 0.255.255 
darkblue #00008B 0.0.139 | 
darkcyan #008B8B 0.139.139 | | 
darkgoldenrod #B8860B 184.134.11 | 
darkgray #A9A9A9 169.169.169 让 
darkgreen #006400 0.100.0 Ee 
darkkhaki #BDB76B 189.183.107 [FEEEEE | 
darkmagenta 和 8B008B 139.0.139 | | 
darkolivegreen #556B2F 85.107.47 Fi] 
darkorange 和 FSC00 255.140.0 [ES 
darkorchid #9932CC 153.50.204 el 
darkred #8B0000 139.0.0 eal 
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续 表 

颜色 的 英文 名 称 中 文 含 义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 颜色 效果 
darksalmon 暗 肉色 #E9967A 133.150.122 | | 
darkseagreen 深 灰 绿色 #8FBC8B 143.188.139 [下 
darkslateblue 深海 蓝 色 #483D8B 72.61.139 [El 
darkslategray 暗 瓦 灰色 #2F4FAF 47.79.79 El 
darkturquoise 深 宝石 蓝 #00CED1 0.206.209 
darkviolet 暗 紫罗兰 色 148.0211 | | 
deeppink 深 粉红 色 三 F1493 255.20.147 Ed 
deepskyblue 暗 天 蓝 色 0.191.255 [E | 
dimgray 暗 灰色 105.105.105 
dodgerblue 闪 灰色 30.144.255 [| 
firebrick 火 砖 色 #B22222 178,34.34 
floralwhite 花白 255.250.240 [ed 
forestgreen 森林 绿 34.139.34 
fuchsia 紫红 色 255.0.255 
gainsboro 淡 灰 色 220.220.220 al 
ghostwhite 幽灵 白 248,248,255 [| 
gold 金色 255.215.0 
goldenrod 金 麒 刨 色 218.165.32 
gray 灰色 128.128.128 
green 绿色 0.128.0 
greenyellow 黄 绿 色 173.255.47 
honeydew 蜜 白色 240,255,240 
hotpink 热 粉红 色 255.105.180 
indianred 印第安 红 #CD5CSC 205.92.92 sd] 
indigo 雍 青 色 #4B0082 75.0.130 el 
ivory 象牙 色 讨 FFFF0 255.255.240 LL | 
khaki 黄 神色 手 0E68C 240.230.140 [到 
lavender 燕 衣 草 色 ， 淡 紫色 #E6EGFA 230.230.250 [ES 
lavenderblush 淡 紫 红色 #EFFOFS 255.240.245 
lawngreen 草绿 色 #7CFCO0 124.252.0 [本 | 
lemonchiffon 柠檬 绸 色 三 FFACD 255.250.205 dl 
lightblue 亮 蓝 色 #ADDSE6 173.216.230 | 
lightcoral 亮 珊瑚 色 240.128.128 [El] 
lightcyan 亮 灰色 和 EOFFFF 224.255.255 到 
lightgoldenrodyellow | 亮 金黄 色 十 AFAD2 250.250.210 到 
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续 表 
颜色 的 英文 名 称 中 文 含 义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 颜色 效果 
lightgreen 亮 绿 色 #90EE90 144.238.144 下 
lightgrey 亮 灰色 #D3D3D3 211.211.211 [ 医 
lightpink 亮 粉色 #FB6C1 255.182.193 [aa 到 
lightsalmon 亮 柠 檬 色 #EFAOTA 255.160.122 el 
lightseagreen 亮 水 绿色 #20B2AA 32.178.170 
lightskyblue 亮 天 蓝 色 135.206.250 FE 
lightslategray 亮 瓦 灰色 #778899 119.136.153 [Eee | 
lightsteelblue 亮 金属 色 176.196.222 [El 
lightyellow 亮 黄 色 255.255.224 [| 
lime 绿 黄色 0.255.0 [ 医 | 
limegreen 橙 绿色 #32CD32 50.205.50 
linen 亚麻 色 250.240.230 [| 


magenta 洋红 色 #FFOOFF 255.0.255 


maroon 栗色 #800000 128.0.0 
mediumaquamarine 中 绿 玉 色 #66CDAA 102.205.170 
mediumblue 中 蓝 色 #0000CD 0.0.205 


mediumorchid 中 粉 紫色 186.85,211 
mediumpurple 中 紫色 147,112,219 
mediumseagreen 中 灰 绿 色 60.179.113 
mediumslateblue 中 暗 蓝 色 123.104.238 
mediumspringereen 春 绿色 0.250.154 
mediumturquoise 中 绿 宝石 色 72.209.204 
mediumvioletred 中 紫罗兰 色 199.21,133 


olivedrab 深 绿 褐色 #6B8E23 107.142.35 
orange 橙色 考 FA500 255.165.0 


orangered 红 橙 色 考 F4500 255.69.0 


midnightblue 中 灰 蓝 色 #91970 25.25.112 | 本 蚁 
mintcream 浒 荷 色 #ESFFFA 245.255.250 [a 
mistyrose 浅 玫瑰 色 本 FE4E1 255.228.225 到 
moccasin 谭 皮 色 施 FE4B5 255.228.181 | 
navajowhite 纳 瓦 白 三 FDEAD 255.222.173 Eee 
Davy 海军 蓝 #000080 0.0.128 
oldlace 老 旧 维 色 故 DF5E6 253.245.230 | 
olive 橄 模 色 #808000 128.128.0 [| 
Ea 
[a1| 
ea 到 | 
a 


orchid 淡 紫 色 #DA70D6 218.112.214 
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续 表 

颜色 的 英文 名 称 中 文 含 义 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 颜色 效果 
palegoldenrod 苍 局 馆 色 #EEESAA 238.232.170 [| 
palegreen 苍 绿 色 #98FB98 152.251.152 [| 
paleturquoise 苍 宝 石 绿 #AFEEEE 175.238.238 到 
palevioletred 苍 紫 罗兰 色 #DB7093 219.112.147 le 
papayawhip 番 木 色 #FFEFDS 255.239,213 [| 
peachpuff 桃色 255.218.185 [| 
pem 秘鲁 色 #CD853F 205.133.65 | 
pink 粉红 色 255.192.203 El 
plum 洋 李 色 221.160.221 
powderblue 粉 蓝 色 176.224.230 [ed 
purple 紫色 #800080 128.0.128 
red 红色 255.0.0 
rosybrown 褐 玫瑰 红 188.143.143 
royalblue 皇家 蓝 65.105.225 
saddlebrown 重 褐色 139.69.19 
salmon 鲜 肉色 250.128.114 
sandybrown 沙 褐色 244,164.96 
seagreen 海 绿 色 46.139.87 
seashell 海 贝 色 255.245.238 [| 
sienna 赭 色 160.82.45 
silver 银色 192.192.192 nal 
skyblue 天 蓝 色 135.206.235 
slateblue 石 蓝 色 106.90.205 
slategray 灰 石 色 #708090 112.128.144 sl] 
snow 雪白 色 三 FFAFA 255.250.250 [eal 
springegreen 春 绿色 #00FF7E 0.255.127 a 
steelblue 钢 兰 色 #4682B4 70.130.180 | | 
tan 茶色 #D2B48C 210.180.140 = 
teal 水 鸭 色 #008080 0.128.128 
thistle 葡 花 色 216.191.216 [EE 
tomato 西红柿 色 考 F6347 255.99.71 | | 
turquoise 青绿 色 64.224.208 [FE 
violet 紫罗兰 色 238.130.238 CE 
wheat 浅黄 色 245.222.179 = 到 | 
white 白色 #FFFFF 255.255.255 | 


他- 


附录 2 CSS 中 支持 的 颜色 名 称 


颜色 的 英文 名 称 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 
Whitesmoke | 烟 白 色 #F5FSFS 245,245.245., | 
yellow #fFFF00 255,255,0 
yellowereen #9ACD32 154,205.50 


